Question

我有几个流体图像，我想浮动并叠加在一起。例如，我将img-div宽度设置为50％，每行堆叠两个图像。根据浏览器大小，图像的大小也会增加。与此同时，我希望能够在每个图像的中间放置一个文本，它漂浮在图像的中心并停留在图像的中心。我的问题是文本没有居中。当我将img设置为绝对时，它会居中但堆叠会搞砸。

知道如何通过CSS才能做到这一点吗？

这是我的HTML代码：

<div id="container">
    <!-- image1 -->
    <div class="img-div">
      <a href="#">
        <img src="images/image1.jpg" />
        <div class="txt-div">
          <p>Some text goes here!</p>
        </div>
      </a>
    </div>

    <!-- image2 -->
    <div class="img-div">
      <a href="#">
        <img src="images/image2.jpg" />
        <div class="txt-div">
          <p>Another text.</p>
        </div>
      </a>
    </div>

    <!-- image3 -->
    <div class="img-div">
      <a href="#">
        <img src="images/image3.jpg" />
        <div class="txt-div">
          <p>Some more text.</p>
        </div>
      </a>
    </div>

    <!-- image4 -->
    <div class="img-div">
      <a href="#">
        <img src="images/image4.jpg" />
        <div class="txt-div">
          <p>Last text.</p>
        </div>
      </a>
    </div>

</div>

这是我的CSS：

.img-div {
  width: 50%;
  float:left;

  a {
    position: relative;
    display: block;
    height: 100%;
    font-size: 0;
    text-align: center;
  }

  a:before {
    vertical-align: middle;
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
  }

  .txt-div {
    vertical-align: middle;
    position: relative;
    z-index: 10;
    display: inline-block;
    font-size: medium;

    p {
      padding: 0; 
      margin:0;
    }

  }

  img {
    position: absolute;
    width: 100%;
    z-index: 9;
    top: 0;
    left: 0;
  }

}

Answer 1

你几乎拥有它：）

使用position:relative/ absolute在图片上绘制文字容器，并使用伪:before和vertical-align技术将<p>居中。

.img-div {
  width: 50%;
  display:inline-block;
  position: relative;
}
.img-div img {
  width:100%;
}
a {
  text-align: center;    
}
.txt-div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
}
.txt-div:before {
  content:'';
  padding-top:100%;
  vertical-align:middle;
  display:inline-block;
}
.txt-div p {
  max-width:95%;
  display:inline-block;
  vertical-align:middle;
}

DEMO：http://codepen.io/gc-nomade/full/Cxkqf

Answer 2

移除p周围的div并将position:absolute;设置为p设置img至position:relative; p现在将更新img，如果我是对的。将text-align:center;设置为p以使其居中。（有时width:100%; p也可能是好的

Answer 3

您可以使用CSS背景图像将每个图像放置在动态大小的div中，然后简单地浮动div，它们将填充任何空间而不改变块级元素的位置。在这种情况下，每个div将根据它将包含的图像获得唯一ID，并且图像的url将是div的背景图像。我可以看到的唯一缺点是，如果图像被禁用，您将无法获得替代文字，但您的div将保持指定的大小。并且处于正确的位置。

在流体图像上居中文本

3 个答案: