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

Question

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

我最初将图像设置为固定高度div的背景，在这种情况下，它相对容易居中，但由于背景图像不是结构，我无法将高度设置为自动函数宽度，当我选择更具响应性的设计时，我不得不抛弃这个选项。

所以我现在有一个包含两个元素的div，img和overlay text。 图像宽度设置为其容器宽度的100％，高度也相应变化。 因此，我不能将叠加文本设置为postion ：absolute和top：80px或者其他东西，因为距离顶部的距离必须变化。 甚至做顶部：25％或其他任何不起作用，因为a）如果页面宽度缩小以挤压文本，或者如果只有更多文本，则当有更多/更少的行时，垂直居中将被抛弃，并且b ）百分比是任意的 - 它不是50或者其他东西，因为当我希望叠加的中心在那里时，这会使文本的顶部覆盖50％的图像。

除了其他方面，我看过这个帖子 ，它肯定很接近 - 但是在这两个解决方案中，图像高度无法调整大小，而在前者中，JS在页面加载时加载，但随后冻结，以便如果我改变页面宽度/高度，事情就会变得糟糕。 理想情况下，这个解决方案不会因为这个原因而涉及JS（即使它重新加载每个调整大小，感觉不理想），但如果这是唯一的解决方案，我会接受它。

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

当前尝试的基本小提琴 ，以及下面相同的代码。 有任何想法吗？ 谢谢！

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

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

这是使用该技术的小提琴 。

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

这是使用该方法的小提琴 ，这个因为max-height而拉伸图像。

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>

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

希望有所帮助