center text on image - html

Question

This is probably very easy to do, but for some reason, nothing is working form me. Lets say I have an image and a text like so:
<div id="my_div">
<img src="my_img.png" alt="Test" />
<p>Some Text</p>
</div>
How do I center the text Some Text horizontally and vertically on my image (I want the text to appear in the middle of the image)
Thank you

Answer 1

You can use display: table/table-cell:
CSS:
.example {
display: table;
width: 100px; /* Width of the image */
height: 100px; /* Height of the image */
}
.example > P {
background: url(my_img.png) no-repeat;
display: table-cell;
text-align: center; /* Center text horizontally. */
vertical-align: middle; /* Center text vertically. */
}
HTML:
<div class="example"><p>
Some text
</p></div>
If you need to have your image as IMG element, you can use similar code with addition of IMG element before it and negative margin-top for element with display:table to position text above image.

Answer 2

An easy way to do this that works in virtually all browsers is to make the image the background image of the div and then set the line-height property of the paragraph. Note that this only really works if the text is on one line.
jsFiddle example
CSS
#my_div p {
line-height:200px;
text-align:center;
color:white;
}
#my_div {
background-image: url(http://www.placekitten.com/400/200);
width:400px;
height:200px;
}
HTML
<div id="my_div">
<p>Some Text</p>
</div>​