Question

我似乎无法获得正确的HTML和样式编码。我可以在html中水平居中文本，但我无法将其垂直居中。我可能错过了一些简单的东西。这是我第一次进行堆栈溢出。我希望我做的一切都是正确的。

<!DOCTYPE html>
<html>
<head>
  <style>
    .Header>p {
      height: 100px;
      text-align: center;
      background-color: black;
      padding-top=20px;
      color: white;
      top: 50px;
    }
  </style>
</head>
<body>
  <div class="Header">
    <p>This text will be vertically aligned</p>
  </div>
</body>
</html>

Answer 1

我会确保您的div设置为可以注意垂直对齐的高度，并且显示设置为 table-cell

＆＃13;

.Header{
  height:200px;
  vertical-align:middle;
  display: table-cell;
  }

＆＃13;

<div class="Header">
  <p>This text will be vertically aligned</p>
</div>

＆＃13;

Answer 2

将line-height: 100px;添加到您的css：

  .Header > p {  height: 100px; 
                 text-align: center; 
                 background-color:black; 
                 padding-top=20px;color:white; 
                 top: 50px;
                line-height: 100px;
   }

使行高等于div的高度。

如何将文本放在html <div>的标题中？

2 个答案: