Alex Hall Alex Hall - 5 months ago 64
HTML Question

Vertically center img inside bootstrap col/row

I know that this topic is covered endlessly already but I've tried many solutions and none have worked. In the snippet below, how can I make the image vertically centered within the col/row divs? Solutions using jQuery are preferred (I'm more likely to break CSS). I don't know the height of the image in advance.



.row {
/* Just for demo */
border: 2px solid black;
}

/* My latest attempt at centering - this code can all be removed if desired*/
.book-image-container {
display: table;
table-layout: fixed;
}
.book-image {
display: table-cell;
vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="book-image-container">
<img class="book-image" src="http://static.loot.co.za/images/x80/691858851600179215$622D8483">
</div>
</div>
<div class="col-xs-6">
<h3>Lorem ipsum</h3>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
</div>
</div>





Edit:

Got it working thanks to Jurik, here's the minimal CSS required:



.row {
/* Just for demo */
border: 2px solid black;
}

.book-image-container {
display: table-cell;
vertical-align: middle;
height: 116px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="book-image-container">
<img class="book-image" src="http://static.loot.co.za/images/x80/691858851600179215$622D8483">
</div>
</div>
<div class="col-xs-6">
<h3>Lorem ipsum</h3>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
</div>
</div>




Answer

You have to give your class book-image-container the display: table-cell css attribute and a height.

.book-image-container {
  display: table;
  table-layout: fixed;
  display: table-cell;
  vertical-align: middle;
  height: 116px;
}
Comments