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>

我认为没有理由认为垂直对齐不起作用。我会感激任何帮助，但我宁愿不使用表方法。非常感谢你。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当我查看代码时，它垂直对齐标题。您是否在代码中的早期实例中已在H1上设置了行高？您可能必须在H1而不是包装div上设置行高。唯一的另一种方式是：

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

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

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

4 个答案: