Is there anyone out there who can assist me in vertically aligning 2 divs inside a button element? Here are the properties:
- The height of the button is known
- The height of the orange div is unknown
- One of the divs contains text (orange div) with either 1 or 2 lines, but the number of lines is unknown
.
Here is the 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 here's the fiddle for reference:
https://jsfiddle.net/15xceg8p/1/
The green square will contain an icon and is properly centered vertically, however, the orange rectangle containing text is currently not aligned vertically.