垂直對齊：包含分區的位置

Question

我使用的是引導中的變化，這包含規則

img { 
    vertical-align: middle; 
} 

對於下面的CSS和標記，視圖不會呈現我所想要的（含的div圖像不排隊正確）：

HTML：

<div class="detail"> 
    <div class="detail_image_container"> 
     <div class="main_image_container"> 
     <img src="http://dummyimage.com/300" class="main_image" /> 
     </div> 
     <ul class="thumbnails"> 
     <li><img src="http://dummyimage.com/50" class="thumbnail selected"/></li> 
     <li><img src="http://dummyimage.com/50" class="thumbnail "/></li> 
     <li><img src="http://dummyimage.com/50" class="thumbnail "/></li> 
     <li><img src="http://dummyimage.com/50" class="thumbnail "/></li> 
     <li><img src="http://dummyimage.com/50" class="thumbnail "/></li> 
     </ul> 
    </div> 
    <div class="detail_info_panel"> 
    <div>SOME TEXT HERE</div> 
    <div>SOME TEXT HERE</div> 
    <div>SOME TEXT HERE</div> 
    <div>SOME TEXT HERE</div> 
    </div> 
</div> 

CSS：

div.detail>div { 
    display: inline-block; 
} 

.detail_image_container>* { 
    display: inline-block; 
} 

ul { 
    list-style-type: none; 
} 

li img { 
    margin: 3px; 
    border: 1px solid black; 
} 

li img.selected { 
    border: 3px solid black; 
} 

下面是它的外觀with和without的img {vertical-align:middle;}。

爲什麼會發生這種情況，我該如何解決？

Answer 1

定義您

.detail_image_container>* { 
vertical-align: middle; 
} 

Demo