flex property messes with button height?
There are two possible solutions
1. d-flex with align-items-* can help you.
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center bg-info" style="height: 160px;">
<button class="btn btn-success">align-items-* saved me :)</button>
</div>2. No css required, just wrap the button with span or div
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex justify-content-around bg-info" style="height: 160px;">
<span>
<button class="btn btn-success">span or div saved me :)</button>
</span>
<button class="btn btn-danger">Aw, flex infected me ;(</button>
</div>Flexbox make items same height as you can see here Demo , but you can use align-items to change that or in your case Demo
.parent {
align-items: center;
display: flex;
}
.child {
border: 1px solid black;
margin: 5px;
}
.child:first-child {
height: 100px;
}<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
</div>This is a simpler solution. This solution aligns the button to the center horizontally and does not mess with the height of the button or other child elements.
.parent {
display: flex;
align-items: center;
}