Html 在DIV中垂直居中文本

我有这个HTML/CSS片段：

.matrix右字母容器{
字体大小：48px；
}
.矩阵广场{
显示：内联块；
垂直对齐：顶部；
利润率：10px；
}
.矩阵输入{
高度：50px；
宽度：50px；
保证金：3倍；
垂直对齐：底部对齐；
}

内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

A.

您应该

垂直对齐：居中

所有内联块，以便将它们彼此垂直对齐

.matrix右字母容器{
字体大小：48px；
}
.矩阵广场{
显示：内联块；
垂直对齐：中间对齐；
利润率：10px；
}
.矩阵输入{
高度：50px；
宽度：50px；
保证金：3倍；
垂直对齐：底部对齐；
}

内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

A.

至少有两种方法可以做到这一点。当然是CSS方式或者使用一些JS

选项1:CSS

现在，您可以为span文本的父容器指定一个

display:table

属性，并为要垂直对齐的元素指定一个

display:table cell

属性，并将其顶部、中间底部等对齐

此处的代码片段：

.matrix行容器{
背景：灰色；
display:table；/*看到我在这里做了什么吗*/
}
.matrix右字母容器{
字体大小：48px；
背景：青色；
显示：表格单元格；/*和此处*/
垂直对齐：中间；/*和此处*/
}
.矩阵广场{
显示：内联块；
垂直对齐：顶部；
利润率：10px；
背景：粉红色；
}
.矩阵输入{
高度：50px；
宽度：50px；
保证金：3倍；
垂直对齐：底部对齐；
}

内容

内容

内容

内容

内容

内容

内容


内容

内容

内容

内容

内容

内容

内容


A.

可能是重复的哦，谢谢！它起作用了！但如果浏览器发现

块

，

内联块

和

表格单元格

混合在

表格

中，您能描述一下它的逻辑吗？为什么它能像我需要的那样工作？