Question

谁能帮我垂直对齐具有以下属性的按钮元素中的2个div：

按钮的高度已知
橙色div的高度未知
其中一个div包含文本（橙色div），有1或2行（行数未知）

这是html代码：

<button style="width: calc(125px * 1); height: calc(30px + 24px); margin-top: 0;margin-bottom: 0;">
    <div id='bt_icon'></div>
    <div id='bt_text'>Fermer</div>
</button>

CSS：

button {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    color: black;
    font-family:'Tahoma', 'Arial', 'Helvetica', sans-serif;
    font-size: 13px;
    cursor: pointer;
    background: linear-gradient(to bottom right, #EDDDB5, #D5C59D);
    box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 rgba(0, 0, 0, 0.3) inset, 2px 2px 8px rgba(0, 0, 0, 0.3);
}

#bt_icon {
    float: left;
    width: 34px;
    height: 34px;
    background-color: green;
}

#bt_text {
    float: right;
    width: calc(100% - 10px - 34px);
    background-color: orange;
}

小提琴：

https://jsfiddle.net/15xceg8p/1/

绿色方块将包含一个图标，并且垂直居中。橙色矩形将包含文本，而不是垂直居中：（

Answer 1

请更新代码

＆＃13;

button {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    color: black;
    font-family:'Tahoma', 'Arial', 'Helvetica', sans-serif;
    font-size: 13px;
    cursor: pointer;
    background: linear-gradient(to bottom right, #EDDDB5, #D5C59D);
    box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 rgba(0, 0, 0, 0.3) inset, 2px 2px 8px rgba(0, 0, 0, 0.3);
}

#bt_icon {
    width: 34px;
    height: 34px;
    background-color: green;
    display: inline-block;
    vertical-align: middle;
}

#bt_text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 10px - 34px);
    background-color: orange;
}

＆＃13;

<button style="width: calc(125px * 1); height: calc(30px + 24px); margin-top: 0;margin-bottom: 0;">
    <div id='bt_icon'></div>
    <div id='bt_text'>Fermer</div>
</button>

＆＃13;

Answer 2

尝试以下样式并从按钮

中删除所有css样式

button{display: table-cell;}
button>div{display: table-cell;vertical-align: middle;}

同时从两个div中删除float。 https://jsfiddle.net/t698pL8j/

垂直对齐按钮内的两个div

2 个答案: