html - 在每个图像的中间放置文本

Question

我正在尝试执行以下操作:我有两张图片并排放置，现在在每张图片中，我想在该图片的中间显示文本。

所以基本上这是应该显示在中间的文本 div:

<div class="overlay-text">
    <a href="about.html" title="about">
        <h3>text</h3>
    </a>
</div>

这是我到目前为止想出的:http://jsfiddle.net/R76df/2/

但是，将文本 div(覆盖文本)框在同一位置显示，而第二个 .overlay-text 应显示在第二个图像的中心。

Answer 1

你有很多不需要的额外 HTML。

这是你的想法吗？

JSfiddle Demo

修改后的 HTML

<div class="about-big">
    <div class="about">
        <img src="http://placekitten.com/200/200" alt="about" />
        <a class="overlay-text" href="about.html" title="about">
            <h3>text</h3>
        </a>
    </div>
    <div class="about">
        <img src="http://placekitten.com/200/200" alt="about" />
        <a class="overlay-text" href="about.html" title="about">
            <h3>text fdsfddsfds</h3>
        </a>
    </div>
</div>

修改后的 CSS

.about-big {
    width: 100%;
    height: auto;
    margin-top: 80px;
    display: inline-block;
    overflow: hidden;
}

.about {
    width:50%;
    float:left;
    position: relative;
}

.about img {
    width: 100%;
    max-height: 800px;
    display: block;
}

.overlay-text {
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    text-align: center;
    position: absolute;
    color:white;
}

.overlay-text {
    padding: 20px 28px;
    border: 4px solid #ffffff;
    border-radius: 4px;
    font-size: 20px;
    text-decoration: none;
    display: inline-block;
    opacity: 0.5;
    filter: alpha(opacity=50);
}