vertical-align: middle not working
I had three buttons in a single div with uncommon height. I was asked to vertical align the buttons to the middle of parent div. After long time of googling and putting my head into PC, I got the solution:
HTML
CSS
Output
HTML
<div class="wrapper">
<div class="block" style="border: solid 1px red;">The red box's height can be dynamic too ;)</div>
<div class="block" style="border: solid 1px green;">The green box's height is dynamic<br>fdfd</div>
<div class="block" style="border: solid 1px green;">The green box's height is dynamic</div>
</div>
<div class="block" style="border: solid 1px red;">The red box's height can be dynamic too ;)</div>
<div class="block" style="border: solid 1px green;">The green box's height is dynamic<br>fdfd</div>
<div class="block" style="border: solid 1px green;">The green box's height is dynamic</div>
</div>
CSS
.wrapper {
border: 2px solid #007EFD;
display: inline-block;
white-space: nowrap;
}
.block {
color: #000000;
display: inline-block;
font: 12px/1.5 Arial,sans-serif;
margin: 5px 2px;
padding: 5px 5px 5px;
text-align: center;
vertical-align: middle;
white-space: normal;
width: 180px;
}
border: 2px solid #007EFD;
display: inline-block;
white-space: nowrap;
}
.block {
color: #000000;
display: inline-block;
font: 12px/1.5 Arial,sans-serif;
margin: 5px 2px;
padding: 5px 5px 5px;
text-align: center;
vertical-align: middle;
white-space: normal;
width: 180px;
}
Output
No comments: