如何将跨度的垂直对齐设置为div的中间

Question

我使用简单的html代码测试vertical-align，但它不起作用

<div style="height:45px; border: solid 1px black;">
    <strong style="vertical-align:bottom;">
        abc
    </strong>
</div>

Answer 1

这就是你如何做到的

<div style="height:45px; border: solid 1px black; display: table;">
    <strong style="vertical-align:bottom; display: table-cell;">
        abc
    </strong>
</div>

演示

正如我之前提到的，垂直对齐非常棘手。 要使其工作，就像在表上一样，将父容器设置为显示为table ，将内部<div>或elements设置为table-cell

Answer 2

给父框（在你的案例div ）一个height ， display: table-cell和vertical-align: middle属性。 这是一个例子：

<div style="height:100px; border: solid 1px black; vertical-align:middle;display:table-cell;">
    <span style="">abc</span>
</div>