当parent 容器指定"display: table" 时如何使"vertical-align:middle" 工作？

Question

我在这里读到 -- CSS vertical-align: middle not working 如果 "vertical-align:middle;" 属性在 CSS 中不起作用，那是因为 parent 容器可以没有指定 "display: table;"。所以我在 parent DIV

中试了一下

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    display: table;
    vertical-align: middle;
}

但是 child 元素

<span>Start</span>

仍然在底部对齐 - https://jsfiddle.net/xwdnvcy5/35/。如何让我的 span 元素在中间垂直对齐？

Answer 1

您错过了在 .btn span 样式中添加 display: table-cell。

    .btn
    {
        position: relative;
        margin-bottom:20px;
        padding: 0 10px;
        text-align: left;
        font-size: 16px;
        color: #333;
        background:gray;
        display: table;
        
    }

    #btn_container
    {
        border-radius:5px;
        background:red;
        position: relative;
        display: inline-block;
    }

    .btn img
    {
        left: 50%;
        margin-left: 0px;
        top: 50%;
        margin-top: 0px;
    }


    .btn span
    {
        vertical-align: middle;
        display: table-cell;
    }

<div id="control" class="btn">

<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>

<span>Start</span> 

</div>

当parent 容器指定"display: table" 时如何使"vertical-align:middle" 工作？

How to make "vertical-align:middle" work when parent container specifies "display: table"?

html

css

center

vertical-alignment