如何将跨度的垂直对齐设置为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>

Demo

正如我之前提到的，垂直对齐非常棘手。要使其工作，就像在桌面上一样，将父容器设置为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>