html - 垂直对齐中间在跨度元素中不起作用

Question

vertical-align:middle 属性在 span 元素中不起作用。我试图将文本居中和中间对齐放置在 span 元素中。我尝试了以下代码:

span {
  text-align: center;
  vertical-align: middle; /* Not working */
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: block;
}

<span>center</span>

Answer 1

您可以使用 display: flex 来实现这一点。

span {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<span>center</span>

vertical-align: middle 不适用于 display: block