Html 文本在响应图像上垂直和水平居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17818976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text vertically and horizontally centered over a responsive image
提问by Sasha
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
我希望将文本垂直和水平居中放置在随着页面变宽而增大的图像上。
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
我最初将图像设置为固定高度的 div 的背景，在这种情况下，将其居中相对容易，但是由于背景图像不是结构化的，我无法将高度设置为宽度，当我想要一个更具响应性的设计时，我不得不放弃这个选项。
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absoluteand top:80pxor something, because the distance from the top will have to vary. And even doing top:25%or whatever doesn't work, because a)if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b)the percentage is arbitrary -- it's not 50 or something, because that would put the topof the text overlay 50% down the image, when I want the center of the overlayto be there.
所以我目前有一个包含两个元素的 div，img 和覆盖文本。图像宽度设置为其容器宽度的 100%，高度相应地变化。因此，我无法将覆盖文本设置为postion :absolute和top:80px 之类的，因为与顶部的距离必须有所不同。甚至做top:25%或其他什么都不起作用，因为a)如果页面宽度缩小以挤压文本，或者如果只有更多文本，则当行更多/更少时，垂直居中会被抛弃，并且b ）的比例是任意的-它不是50或东西，因为那会把顶部的文本覆盖50％缩小的图像，当我想要的覆盖的中心在那里。
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
除其他外，我看过这篇文章，这绝对是接近的——但在这两种解决方案中，图像高度都无法调整大小，而在前者中，JS 在页面加载时加载，但随后冻结，因此如果我更改页面宽度/高度，事情就会变得不正常。理想情况下，这个解决方案不会因为这个原因而涉及 JS（即使它在每次调整大小时重新加载，感觉不理想），但如果这是唯一的解决方案，我会接受它。
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
此外，只是为了增加细节/乐趣，我在图像上设置了最大高度，因为我不希望它超过大约 300 像素的高度，即使在电影院显示上也是如此。
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
此处当前尝试的基本小提琴，以及下面的相同代码。有任何想法吗？谢谢！
html
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
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;
}
采纳答案by koala_dev
You can use CSS background-sizeto set the width to 100% and the height will be calculated to maintain aspect ratio.
您可以使用 CSSbackground-size将宽度设置为 100%，并且将计算高度以保持纵横比。
Here's a fiddleusing that technique.
这是使用该技术的小提琴。
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cellto center the overlay:
如果您希望图像作为 HTML 元素，那么我建议您将其位置设置为绝对位置并使用相同的方法disply:table-cell将叠加层居中：
Here's a fiddleusing that method, this one stretches the image because of the max-height.
这是使用该方法的小提琴，由于max-height.
回答by Arun Redhu
Please Try the below css for .overlay as in your fiddle
请在您的小提琴中尝试以下 .overlay css
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
或者这是更新的小提琴链接http://jsfiddle.net/hLdbZ/284/
回答by Pete
I just added to the html
我刚刚添加到 html
<div align="center"></div>
<div align="center"></div>
to surround your existing code to get the image to center
包围您现有的代码以使图像居中
hope that helps
希望有帮助
