在bootstrap col / row内将img垂直居中

Question

我知道这个话题已经被无休止地涵盖了，但是我尝试了很多解决方案，但是都没有成功。 在下面的代码段中，如何使图像在col / row div中垂直居中？ 首选使用jQuery的解决方案（我更有可能破坏CSS）。 我事先不知道图像的高度。

 .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> 

编辑：

感谢Jurik，它可以正常工作，这是所需的最少CSS：

 .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 1

您必须给班级的book-image-container display: table-cell css属性和高度。

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

Answer 2

我不会用jQuery解决此问题，但是，嘿，您要了它： http : //jsbin.com/dumifahuja/edit? html,css,js,console, output

找到最接近的父行的高度，从中减去图像的高度，然后将其除以二，然后将上margin-top设置为该值。