Question

我正在使用bootstrap，其中包含规则

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

vertical-align：包含div位置的中间更改

1 个答案: