css - 用 :after pseudo selector 定位文本

Question

我有这个:

    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>

我知道您可以使用 :after 伪选择器添加文本，但我想将该文本居中放置在我的图像下方。我可以使用 :after 伪选择器来做到这一点吗？

此刻，文本似乎卡在了 div#myImg DIV 的顶部。

更新:

display:block

不成功...

Answer 1

通常我使用 CSS position 来做这类事情。制作父级 position:relative，将 position:absolute 添加到 ::after 元素，并给它一个 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;
}