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

Question

我想要在一个图片上垂直和水平居中文本，当页面变宽时图片会增长。

我最初将图片设置为固定高度的div的背景，这样可以相对容易地将其置中，但是因为背景图片不是结构性的，所以我不能将高度设置为宽度的自动函数，当我进行更加响应式的设计时，我不得不放弃这个选项。

所以现在我有一个包含两个元素的div，img和覆盖文本。图像宽度设置为其容器宽度的100％，高度随之而变化。然而，由于这个原因，我无法将覆盖文本设置为position:absolute和top:80px或类似的东西，因为从顶部的距离将必须变化。即使使用top: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;
}

- Sasha

---

可能重复问题 https://dev59.com/KXVD5IYBdhLWcg3wL4gA - user1477388

可能是重复的问题 https://dev59.com/gWzXa4cB1Zd3GeqPWbJZ - user1477388

另一个解决方案在这里：https://dev59.com/dnzaa4cB1Zd3GeqPLh3g#21562992 - Hashem Qolami

Answer 1

您可以使用CSS的background-size将宽度设为100％，高度将被计算以保持纵横比。这里有一个使用该技术的 样例。

如果您想要将图像作为HTML元素，则建议您将其位置设置为绝对，并使用相同的display:table-cell方法来居中叠加层。这里有一个使用该方法的样例，由于 max-height 的存在，此样例会拉伸图像。

- omma2289

---

太棒了。我最终采纳了第一个选项的建议，使用背景图像。有两个注意点：我还必须将背景div的宽度设置为100％，因为我的大屏幕上的图像像素比窗口宽度小。此外，我认为只有在内部叠加文本具有垂直边距以给容器确定的垂直高度时，这才适用于我的情况（具有大量堆叠内容）。无论如何，它运行良好。谢谢！ - Sasha

Answer 2

请尝试在您的“fiddle”中使用以下CSS来设置“.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%);
}

或者这是更新后的 fiddle 链接 http://jsfiddle.net/hLdbZ/284/

- Arun Redhu

Answer 3

我使用这个组合：

.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;
}

- Mario Team

Answer 4

我刚刚添加到了html中

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

用来包围你现有的代码，让图像居中显示

希望可以帮到你

- Pete