8

我正在寻找在页面变宽时增长的图像上垂直和水平居中的文本。

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

所以我目前有一个包含两个元素的 div，img 和覆盖文本。图像宽度设置为其容器宽度的 100%，高度也相应变化。但是，因此，我无法将覆盖文本设置为postion :absolute和top:80px或其他内容，因为与顶部的距离必须有所不同。甚至做top:25%或其他任何不起作用的方法，因为a)如果页面宽度缩小以挤压文本，或者如果只有更多文本，则当有更多/更少行时垂直居中被抛出，并且b )百分比是任意的——它不是 50 之类的，因为当我想要覆盖的中心在那里。

除其他外，我查看了这篇绝对接近的帖子——但在这两种解决方案中，图像高度都无法调整大小，而在前者中，JS 在页面加载时加载，但随后冻结，因此如果我更改页面宽度/高度，事情就会变得不正常。理想情况下，这个解决方案不会仅仅因为这个原因而涉及 JS（即使它在每次调整大小时都重新加载，感觉不理想），但如果这是唯一的解决方案，我会接受它。

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

当前尝试的基本小提琴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;
}
4

4 回答 4

6

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

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

如果您希望图像作为 HTML 元素，那么我建议您将其位置设置为绝对并使用相同的方法disply:table-cell来居中覆盖：

这是使用该方法的小提琴max-height，因为.

于 2013-07-23T19:46:38.397 回答
1

请在您的小提琴中尝试以下用于 .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%);
}

或者这是更新的小提琴链接http://jsfiddle.net/hLdbZ/284/

于 2016-06-22T07:53:10.263 回答
0

我使用这种组合：

.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;
}
于 2021-08-29T16:27:54.327 回答
-1

我刚刚添加到html

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

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

希望有帮助

于 2015-01-27T03:08:46.573 回答