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;
}

Answer 2

您可以相对于父级绝对定位伪元素。将position: relative添加到div，将position: absolute添加到:after CSS，然后使用常规方法进行排名。我在这里做了一个快速的小提琴：http://jsfiddle.net/5s3Fr/

Answer 3

我不了解您的要求，但如果您要编写现代浏览器/ html5，则应查看<figure>和<figcaption> html标记

供您考虑：FIDDLE

<强>标记：

<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;
}

使用：after伪选择器定位文本

3 个答案: