文本在响应式图像上垂直和水平居中

Question

我希望在页面变宽时将文本垂直和水平居中放在图像上。

我最初将图像设置为固定高度 div 的背景，在这种情况下，将其居中相对容易，但由于背景图像不是结构化的，我无法将高度设置为自动宽度的函数，当我进行更灵敏的设计时，我不得不放弃这个选项。

所以我目前有一个 div，其中包含两个元素，img 和覆盖文本。图像宽度设置为其容器宽度的 100%，高度也相应变化。但是，因此，我不能将覆盖文本设置为 postion:absolute 和 top:80px 之类的，因为与顶部的距离必须有所不同.甚至做 top:25% 或任何不起作用的方法，因为 a) 如果页面宽度缩小以挤压文本，或者如果只有更多文本，垂直当有更多/更少的行时，居中会被取消，并且 b) 百分比是任意的 - 它不是 50 或其他东西，因为这会将文本的 top当我希望叠加层的中心在那里时，将图像向下叠加 50%。

除其他外，我查看了this post，这绝对是接近的——但在这两种解决方案中，图像高度无法调整大小，而在前者中，JS 在页面加载时加载，但随后冻结，因此如果我更改页面宽度/高度，事情就会变得不正常。理想情况下，这个解决方案不会仅仅因为这个原因而涉及 JS（即使它在每次调整大小时都重新加载，感觉不理想），但如果这是唯一的解决方案，我会接受它。

另外，为了增加细节/乐趣，我在图像上设置了最大高度，因为我不希望它超过大约 300 像素的高度，即使在电影院显示器上也是如此。

Basic fiddle of current attempt here，以及下面的相同代码。有任何想法吗？谢谢！

html

<div class='quotation_div'>
  <img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
  <div class='overlay'>
      <p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
  </div>
</div>

css

.quotation_div {
position: relative;
display: table;
}
img {
   width: 100%;
   max-height: 300px;
}
.overlay {
    z-index: 99;
    width: 70%;
    margin-left: 15%;
    vertical-align: middle;
    position: absolute;
    top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
    text-align: center;
    color: red;
    font-size: 165%;
    font-weight: lighter;
    line-height: 2;
}

Answer 1

我使用这个组合：

.CONTAINER {
  position: relative;
  text-align: center;
}

.TEXT {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.IMG {
  //for responsive image
  width: 100%;
  height: auto;
}

Answer 2

请尝试下面的 css for .overlay 就像在你的小提琴中一样

.overlay {
    z-index: 99;
    width: 70%;
    /* height: 100%; */
    /* margin-left: 15%; */
    /* vertical-align: middle; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

或者这是更新的小提琴链接http://jsfiddle.net/hLdbZ/284/

Answer 3

我刚刚添加到html中

<div align="center"></div>

包围现有代码以使图像居中

希望对你有帮助

Answer 4

您可以使用 CSS background-size 将宽度设置为 100% 并计算高度以保持纵横比。

这里是 a fiddle 使用该技术。

如果您希望图像作为 HTML 元素，那么我建议您将其位置设置为绝对位置，并使用与 disply:table-cell 相同的方法将叠加层居中：

这里是 a fiddle 使用该方法，这是因为max-height而拉伸了图像。