Question

我在div中有一些垂直对齐的文本，我希望在浏览器调整大小时保持垂直居中。当div与浏览器缩小时，我的文本会偏向div的底部。有什么建议吗？

以下是我遇到的Fiddle问题。

HTML：

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

CSS：

.outer-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
  background-size: 100% auto;
  height: 360px;
}

.inner-wrapper {
  display: table;
  width: 100%;
  height: 360px;
}

.header-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: #fff;
}

Answer 1

这是你要找的吗？

文本确实居中，虽然背景图片没有，因此看起来没有，所以这里有两个版本（小提琴使用background-size: cover），其中图像中心也是

Updated fiddle

html, body {
  height: 100%;
}
.outer-wrapper {
  background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
  background-size: 100% auto;
  max-height: 360px;
  height: 100%;
}

.inner-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.header-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: black;
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>

Answer 2

问题是你的背景，div保持相同的大小，文本保持居中，你的背景使它看起来不那么。就像Gavin所说的那样使用背景大小的封面。

Answer 3

您的问题实际上并非您的文字不居中，因为它是。您的实际问题是您的图像没有足够的高度来填充容器的高度。

请参阅下面的屏幕截图，这里我使用了元素检查器来突出显示＆＃34;外包装＆＃34;这是你看到的蓝盒子。请注意文本在其中居中。

因此要解决实际问题，即图像需要填补div或需要保持居中。

要保持居中，请将以下内容添加到外包装：（Fiddle）

background-position: center;

要填充div，请从外包装中删除背景大小并添加：（Fiddle）

background-position: center;
background-cover: cover;

div中的垂直对齐文本 - 响应窗口大小调整

3 个答案: