Question

我希望将文本垂直和水平居中于图像，当图像变宽时会增长。

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

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

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

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

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

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

这是使用该技术的 a fiddle 。

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

这是使用该方法的 a fiddle ，由于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>

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

希望有所帮助

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

3 个答案: