Question

我有一张图片，需要在图片下方添加“点击放大”文字，但可以使用CSS执行此操作。

到目前为止，这是我所拥有的，但我似乎无法正确定位。它似乎漂浮在图像的右侧。我怎样才能将它直接放在图像下方和左侧？

#main_image:after{ 
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}

Answer 1

这是使用伪元素添加标题的一种方法。

您的 HTML 可能如下所示：

<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>

您的 CSS 可以是：

.main_image {
    border: 1px solid blue;
    padding: 10px 10px 40px 10px;
    display: inline-block;
    position: relative;
}
.main_image img {
    vertical-align: top;
}
.main_image:after { 
    content: "click image to enlarge";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: beige;
    text-align: center;
}

将伪元素添加到<a>标记，然后根据需要进行定位。

我使用了绝对定位，但还有其他选择。

请参阅演示：http://jsfiddle.net/audetwebdesign/fQyhj/

Answer 2

只需添加display: block：http://jsfiddle.net/fQyhj/4/

即可

#main_image:after{ 
    content:"click image to enlarge";
    text-align:left;
    position:relative;
    margin-bottom:10px;
    display: block;
}

我假设你的#main-image不是图像本身，但是当你看到文本时，它会包围它。

作为参考，伪元素不适用于“已替换”元素：http://www.red-team-design.com/css-generated-content-replaced-elements

Answer 3

您必须添加另一个<div>才能执行此操作。请参阅 Fiddle

我已使用margin-top: -80px;将文字放在图片上。

CSS Pseudo-Elements - 使用：after将文本放在图像下面

3 个答案: