img in bootstrap col/row

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は、のGot：

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

最も近い親行の高さを見つけ、そこから画像の高さを差し引き、その後、分割その2とセットでその金額にmargin-top。