垂直对齐（行高法）不起作用

Question

我的HTML文件中的代码如下：

#firstblock h1 {
    font-family:'Open Sans';
    font-size: 12vh;
    text-align: center;
}
#firstblock {
    position: relative;
    height: 200px;
    line-height: 200px;
}

<div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>

我看不出垂直对齐不起作用的原因。我将不胜感激任何帮助，但我宁愿不使用 table 方法。非常感谢。

Answer 1

当我查看代码时，它是垂直对齐标题的。您是否已经在代码的较早实例中的 H1 上设置了 line-height？您可能必须在 H1 上设置 line-height 而不是环绕 div。唯一的其他方法是：

#firstblock {display: table;}
#firstblock h1 {display: table-cell; vertical-align: middle}

Answer 2

你们非常接近。在 h1 上将边距设置为 0，您将得到预期的结果。

#firstblock {
  position: relative;
  height: 200px;
  line-height: 200px;
  border: 1px dotted blue;
}
#firstblock h1 {
  font-family: 'Open Sans';
  font-size: 12vh;
  text-align: center;
  margin: 0;
}

<div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>

Answer 3

好的，试试这个。将宽度 100% 添加到 #firstblock，而不是垂直对齐 h1，我们将设置父元素的样式 div.

#firstblock {display: table; width: 100%;}
#firstblock #title {
   display: table-cell;
   height: 100%;
   text-align: center;
   vertical-align: middle;
   width: 100%;
}

不幸的是，要使用 100% 在整个页面上垂直对齐它，所有父元素的高度都必须为 100%。所以尝试对所有父元素应用 100% 的高度。

Answer 4

试试这个：

  #firstblock {
  position: relative;
  height: 100%;
  line-height: 200px;
  border: 1px dotted blue;
}

 #firstblock h1  {
 font-family: 'Open Sans';
 font-size: 12vh;
 text-align: center;
 border: solid 5px #acecaa;
 margin:50% 0% 50% 0%;
 }

垂直对齐（行高法）不起作用

Vertical Align (line-height method) not working

html

css

position

alignment