I have an image and a text title that I'm trying to center in a div. I would like the image to be to the left of the title, and for both of these elements to be centered both horizontally and vertically in the div.
I've found one way to do it, by nesting the image inside of a paragraph. I'm assuming this is not the proper way to do it, but I haven't been able to figure out any other way.
Here is a jsfiddle: http://jsfiddle.net/FvpV3/
And here is the code:
<body> <div style="text-align:center;"> <div style="width:50%;display:inline-block;border:1px solid;border-radius:6px;border-color:#CFCFCF;background-color:#EFEFEF;"> <div style="background-color:#E4E4E4;min-height:50px;width:100%;"> <div style="display:inline-block;vertical-align:middle;"> <p style="float:left;"> <img src="cid:logo-img" style="float:left;"/> </p> <p style="color:#000000;float:left;padding-left:10px;">Title</p> </div> </div> <div> <p>message</p> </div> </div> </div> </body>
Does anyone know of a better way to position the image and title?