文字垂直和水平居中在响应式图片上方 [英] Text vertically and horizontally centered over a responsive image
问题描述
我想在文字纵向和横向上将图片放在图片上方，以便在网页变宽时显示。
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
我最初将图片设为背景一个固定高度的div，在这种情况下，它是相对容易的中心，但由于背景图像不是结构，我不能设置的高度是一个自动函数的宽度，我不得不抛出这个选项当我去一个更响应的设计。
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，它有两个元素，img和覆盖文本。图像宽度设置为其容器宽度的100％，并且高度相应地变化。因此，我无法将重叠广告文字设为 postion：absolute 和 top：80px 或其他内容，因为距离顶部的距离必须改变。即使 top：25％或无效， a）如果页面宽度收缩挤压文本，或者只有更多的文本，垂直当有更多/更少的行时，中心被抛出， b），百分比是任意的 - 它不是50或某事，因为这会将文本的顶部
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:absolute and top:80px or 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 top of the text overlay 50% down the image, when I want the center of the overlay to be there.
我已经看过，除了别的以外，在这篇文章，这是绝对接近 - 但在这两个解决方案，图像高度不能调整大小，在前者，JS加载页面加载，但后冻结，所以如果我改变页面宽度/高度，事情变得无聊。理想情况下，这个解决方案不会涉及JS因为这个原因（即使它重新加载在每个调整大小，感觉不理想），但如果这是唯一的解决方案，我会接受。
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.
此外，只是为了增加细节/乐趣，我已经在图像上设置了一个最大高度，因为我不希望它超过大约300px的高度，即使在电影院显示。
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.
此处尝试的基本小提示，以及相同的代码下面。有任何想法吗？非常感谢！
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
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;
}
推荐答案
c $ c> background-size 将宽度设置为100％，并计算高度以保持宽高比。
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
这里 小提琴 使用该技巧。
Here's a fiddle using that technique.
如果你想将图像作为一个HTML元素，我建议你将它的位置设置为绝对，并使用相同的方法 disply：table-cell
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-cell to center the overlay:
这里是 小提示 使用该方法，由于 max-height ，此图片会展开图片。
Here's a fiddle using that method, this one stretches the image because of the max-height.
这篇关于文字垂直和水平居中在响应式图片上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
