Positioning text with the :after pseudo selector - css

Question

I have this:
div#myImg{
background: url('myimage.png') left top no-repeat;
}
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
}
<div id="myImg" class="lp_imgs"></div>
I know you can add text with the :after pseudo selector, but I want to position that text, centered, just below my image.
Can I do that with the :after pseudo selector?
At the moment, the text seems stuck to the top of the div#myImg DIV.
UPDATE:
display:block
Doesn't do the trick...

Answer 1

Usually I use CSS position to do that sort of thing. Make the parent position:relative, add position:absolute to the ::after element, and give it a top:100%
http://jsfiddle.net/s22Af/
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
position:absolute;
top: 100%;
text-align: center;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
position: relative;
}

Answer 2

You can position pseudo elements absolutely relative to the parent. Add position: relative to the div and position: absolute to the :after CSS, then position using usual methods. I've done a quick fiddle of it here: http://jsfiddle.net/5s3Fr/

Answer 3

I don't know your requirements but if you're coding for modern browsers/html5 you should look into the <figure> and <figcaption> html tags
For your consideration: FIDDLE
Markup:
<figure id="myFigure">
<div id="myImg" class="dm_lp_imgs"></div>
<figcaption>text under image</figcaption>
</figure>
CSS
.dm_lp_imgs {
width: 100px;
height: 115px;
}
#myFigure {
float:left;
margin-right: 15px;
width: 100px;
}
#myImg { background: url('myimage.png') left top no-repeat; }
#myImg + figcaption {
/* Style caption here */
text-align:center;
text-transform:capitalize;
}