垂直对齐：包含分区的位置

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