在流体图像上居中文本答案

【问题标题】：Center text over fluid images在流体图像上居中文本
【发布时间】：2014-03-04 03:23:59
【问题描述】：

我有几张流畅的图像，我想漂浮并堆叠在一起。例如，我将 img-div 宽度设置为 50%，它在每行中堆叠两个图像。图像的大小也会根据浏览器的大小而增加。同时，我希望能够在每个图像的中间放置一个文本，该文本会漂浮并停留在图像的中心。我的问题是文本没有居中。当我将 img 设置为 absolute 时，它会居中，但堆叠会变得混乱。

知道如何仅通过 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;
  }

}

【问题讨论】：

一个 JSfiddle 会很有用，但定位 p 绝对是一个开始。

标签： html css css-float

【解决方案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;
}

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

【讨论】：

【解决方案2】：

删除p 周围的 div 并将position:absolute; 设置为p 将img 设置为position:relative; p 现在将超过img，如果我是正确的。将text-align:center; 设置为p 使其居中。（有时width:100%; 和p 也可能很好）

【讨论】：

好的答案，我快接近了！现在的问题是我必须设置 top:50% 和 left:50% 以使 p 居中，但你得到的是从中心开始的 p 的左上角。我想看到固定在中心的 p 框的中心。你知道我的意思吗？

【解决方案3】：

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

【讨论】：