I’m having trouble trying to vertically center a button in a the body of a panel. I have tried a bunch of css suggestions on stack overflow and the button will still not move. I want the button to be centered next to the image.
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<p>Panel Heading</p>
</div>
<div class="panel panel-body">
<div class="col-lg-2 button">
<button id="fix_button" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-triangle-top"> Fix</span> </button>
</div>
<div class="col-lg-offset-3"> <img src="users/1479318868.jpg" class="img-responsive" width="300px"> </div>
</div>
</div>
</div>
</div>
</div>
3
Answers
try
You can try CSS Flexbox. Make your
.panel-body
a flex container use flex’s center properties.Have a look at the snippet below:
Hope this helps!
Try it:-
for just horizontal alignment use either
or