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

Question

I test vertical-align with a simple html code, but it doesn't work

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

Answer 1

This is how you do it

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

Demo

As I have mentioned before, vertical aligns are very tricky. For this to work, like it did on table, set the parent container to display as table and the inner <div> s or elements to display as table-cell

Answer 2

Give the parent box (in your case div ) a height , display: table-cell and vertical-align: middle properties. Here is the example:

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