Html 垂直对齐中间不在跨度元素中工作

vertical align:middle

属性在

span

元素中不起作用。我已尝试将文本居中对齐放置在

span

元素中。我尝试了以下代码：

span{
文本对齐：居中；
垂直对齐：中间；/*不工作*/
高度：150像素；
宽度：150px；
边框：1px纯黑；
显示：块；
}

---

center

您可以使用

display:flex

来实现这一点

span{
高度：150像素；
宽度：150px；
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

---

居中

您正在使用的显示：块；显示块具有方框行为

但是你试图运行一个文本行为

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

例如，如果高度为150px：

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

---

将子对象的线条高度设置为容器的高度，或在容器上设置定位，并将子对象绝对定位在顶部：50%，边距顶部：-YYYpx，YYY为子对象已知高度的一半。

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

使用

行高

属性（在这种情况下，指定与高度相同的行高）：

带

显示：表格

：

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

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

使用

显示：内联flex：

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

span{
文本对齐：居中；
垂直对齐：中间；/*不工作*/
高度：150像素；
宽度：150px；
边框：1px纯黑；
}
.线高中心{
显示：内联块；
线高：150px；
}
.桌子中心{
显示：内联表；
}
.工作台中心跨度{
显示：表格单元格；
}
.柔性中心{
显示：内联flex；
对齐项目：居中；
证明内容：中心；
}

具有行高属性的

：

居中
带显示表：

居中
带显示弹性：

中心

当这样的事情让你“惊讶”时，你至少应该努力去了解你遇到问题的房产。-“适用于”会告诉你问题所在。@Stephen Kennedy你应该将此作为最佳答案。你有几个选择，答案是完全正确的。

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