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

你有很多选择。我提供了3个例子：

使用line-height属性（在这种情况下为，指定行高与高度相同）：
```
.line-height-center {
   display: inline-block;
   line-height: 150px;
}
```

使用display: table：

.table-center {
  display: inline-table;
}

.table-center span {
  display: table-cell;
}

使用display: inline-flex;：

.flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

span {
  text-align: center;
  vertical-align: middle; /* Not working */
  height: 150px;
  width: 150px;
  border: 1px solid black;
}
.line-height-center {
  display: inline-block;
  line-height: 150px;
}

.table-center {
   display: inline-table;
}

.table-center span {
  display: table-cell;
}

.flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<p>With line height property:</p> 
<span class="line-height-center">center</span>
<p>With display table:</p> 
<span class="table-center"><span>center</span></span>
<p>With display flex:</p> 
<span class="flex-center">center</span>

＆＃13;

Answer 2

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

Answer 3

您正在使用display：block;显示块具有框行为。

但是你试图运行文本行为。

如果你有一个已知的高度，你可以只使用行高。

如果高度为150px：

line-height: calc(150px - 15px);

Answer 4

设置子项的行高等于容器的高度，或者设置容器上的定位，并将子项置于顶部：50％带margin-top：-YYYpx，YYY是已知高度的一半孩子。

垂直对齐中间不在span元素中工作

4 个答案: