Question

I am enclosing image name in p tag, and append it to each image. Currently the p tag will be position at the bottom left of the image, and I not sure how to align it to the middle, either by using jquery or css.

Here is my html construct:

<div id="Medium2" style="position: absolute; top: 393px; left: 657px;">
     <div style="overflow: hidden; position: relative; width: 252px; height: 111px; top: 0px; left: 0px; margin: 0px;">
     <img id="Medium2_1" style="width: 252px; height: 111px; resize: none; position: static; display: block;" src="../../Content/ContainerImg/Medium2.png">
     </div>
<p id="165" class="labels" oldtitle="Double click to rename...">IMAGE NAME</p>

Any idea how can put the p tag to the middle of the img??

Appreciate any help… thanks….

Answer 1

Just wrap both the <img> and the <p> in the same <div> element, and set that <div> element’s text-align property to center. Here’s an example:

http://jsfiddle.net/jhrTM/