CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Alex Hall
Alex Hall

Reputation: 36013

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>

Upvotes: 0

Views: 217

Answers (2)

Joey M-H
Joey M-H

Reputation: 773

I wouldn't solve this with jQuery, but hey, you asked for it: http://jsbin.com/dumifahuja/edit?html,css,js,console,output

Find the closest parent row's height, subtract the image's height from it, then divide that by two and set the margin-top to that amount.

Upvotes: 0

Jurik
Jurik

Reputation: 3264

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;
}

Upvotes: 2

Related Questions