时间戳

首页 > 解决方案 > 垂直对齐中间在跨度元素中不起作用

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

问题描述

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

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

标签： htmlcss

解决方案

您可以使用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

推荐阅读