Vertically align two divs inside a button - html

Question

Who could help me to vertically align 2 divs inside a button element with these properties :
height of button is known
height of orange div is unknown
one of the div contain text (orange div), with 1 or 2 lines (number of lines is unknown)
.
Here is html code :
<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;
}
And the fiddle :
https://jsfiddle.net/15xceg8p/1/
The green square will contain an icon and is well vertically centered. The orange rectangle will contain text and is not vertically centered :(

Answer 1

Please update code
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>

Answer 2

try below styles and remove all css style from button
button{display: table-cell;}
button>div{display: table-cell;vertical-align: middle;}
Also remove float from both div's.
https://jsfiddle.net/t698pL8j/