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>

편집 :

.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

당신은주고 있습니다

는 여기에 필요한 최소한의 CSS입니다, Jurik 덕분에 작업있어 귀하의 클래스 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

가장 가까운 부모 행의 높이를 찾아, 그것에서 이미지의 높이를 차감 한 후 분할 두 개의와 세트로 그 금액에 margin-top.