Question

我在这里阅读 - CSS vertical-align: middle not working如果＆＃34; vertical-align：middle;＆＃34;属性不在CSS中工作，因为父容器没有＆＃34; display：table;＆＃34;指定。所以我在父母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;
}

但是子元素

<span>Start</span>

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

Answer 1

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

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

如何制作＆＃34; vertical-align：middle＆＃34;当父容器指定＆＃34;显示：table＆＃34;？

1 个答案: