CODEWITHSUNDEEP
htmlcss
Jerry
Jerry

Reputation: 1238

Vertically align two divs inside a button

Who could help me to vertically align 2 divs inside a button element with these properties :

.

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

Upvotes: 0

Views: 599

Answers (2)

Ram kumar
Ram kumar

Reputation: 3162

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>

Upvotes: 1

Naresh Sharma
Naresh Sharma

Reputation: 1

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/

Upvotes: 0

Related Questions