css - 尽管图像调整大小，图像上的文本仍保留在原位

Question

我做了一个包含三张图片的快速网页设计。

随着浏览器尺寸的减小，图片也随之缩小，因此它们都保持可见。

现在我尝试在这些图像上放置文本，但文本会随着浏览器大小的调整而四处移动。

基本上，随着图片尺寸的减小，我希望文本始终停留在图片的一个位置。

这是 JSFIDDLE:http://jsfiddle.net/JwGuR/

您会注意到图像上什至没有文字，因为窗口很小。尝试将窗口变大，文本将显示在图像上。无论浏览器大小如何，我都希望文本保留在原位。

这是文本的 CSS:

.imgText {
    display: inline-block; 
    text-align: center; 
    margin: 0; 
    padding: 250px 0 0 200px; 
    position: absolute;
    font-size: 25px;
    width: auto;
    height: auto;
    color:white;
}

Answer 1

这正是您想要的:http://jsfiddle.net/MrLister/JwGuR/10/

<div class="figure">
    <div class="figcaption">Text1</div>
    <img src="path/to/image">
</div>

(或者您可以使用真正的 HTML5 并使用实际的 <figure> 和 <figcaption> 元素。)

CSS:

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center; 
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:50%;
    z-index:1;
}

.figure img {
    display:block;
    max-width: 100%; 
}

如果需要，您也可以通过提供 .figure 来丢失图像之间的空白。元素 a float:left . (并在之后执行 clear)。