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）显示在同一位置，而第二个.overlay-text应显示在第二个图像的中心。

Answer 1

看起来您正在为两个文本应用相同的样式。尝试将第二个文本向右移动。尝试将此添加到您的CSS，看看它是否修复它。

.about-big2 .overlay-text {
    right: 0;
}

Answer 2

希望这是有道理的。我这样做了.about-big1和2是位置：相对并将它们设置为半宽而不是图像。

http://jsfiddle.net/5CuxP/

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

.about-big1, .about-big2{
    width: 49%;
    position:relative;
    display:inline-block;
}

Answer 3

你有很多额外的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);
}

将文本放在每个图像的中间

3 个答案: