html - 垂直对齐按钮内的两个div

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

还有 fiddle :

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

绿色方 block 将包含一个图标并且垂直居中。橙色矩形将包含文本并且不垂直居中:(

Answer 1

请更新代码

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

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