Question

我正在研究这个设计，而且我已经陷入困境。这是我的简化设计： jsFiddle

如您所见，我在div中有多个图像。我需要做的是让它们看起来像这样：

enter image description here

所以他们和边界之间有自动边距。

垂直对齐的解决方案是将图像放在50px高度，因为#container div具有固定高度，或使用具有display: inline-block和vertical-align: middle属性的辅助div ，但我不知道如何处理水平对齐，因为它不是固定的宽度。

我尝试了display: block和margin: 0 auto，但它没有成功。它不再显示在同一行上的图像。有什么想法吗？

Answer 1

在父

上使用text-align:center

JSfiddle Demo

<强> CSS

*{
    margin: 0px;
    padding: 0px;
}

body, html {
    width: 100%;
}

#container {
    width: 50%;
    height: 50px;
    display: block;
    margin: auto;
    border: 1px solid blue;
    line-height: 50px;
    text-align: center;
}

#container img{
    width: 30px;
    height: 30px;
    margin: 0 25px;
    vertical-align: middle;
}

Answer 2

您可以使用：

#container {
    width: 50%;
    height: 50px;
    display: block;
    margin: auto;
    border: 1px solid blue;
    line-height: 50px;
    text-align: center;/*Add text align center*/
}

#container img{
    width: 30px;
    height: 30px;
    vertical-align: middle;/*Add vertical align middle*/

}
#container img:not(:first-child){
    margin-left: 50px;/*Add margin not in first image though*/
}

fiddle

Answer 3

您可以将图像设为内联块，然后将text-align: center添加到容器中。然后将图像分开，并在上面留出一些边距，如下所示：

#container {
    width: 50%;
    height: 50px;
    display: block;
    margin: auto;
    border: 1px solid blue;
    line-height: 50px;
    text-align: center;
}

#container img{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5%;
}

JSFiddle：http://jsfiddle.net/a0n8wm5k/2/

Answer 4

由于容器是固定高度，为什么不给每个img一个填充/边距？

http://jsfiddle.net/4mk6s1d5/

#container img{
    width: 30px;
    height: 30px;
    padding-left: 20px;
    vertical-align: middle;
}

Answer 5

你可以在css中添加margin-left，如果你需要就像你在图像中显示的那样你应该增加容器的宽度，如

#container {
width: 80%;
height: 50px;
display: block;
margin: auto;
border: 1px solid blue;
line-height: 50px;
}

#container img{
margin-left:35px;
width: 30px;
height: 30px;
}

这是小提琴 http://jsfiddle.net/a0n8wm5k/7/

Answer 6

这是我的2美分，使用table-cell。

请注意，我添加了一个父容器，以table-cell为中心。您的问题是针对图片的，因此我不认为这是一个问题？

<div id="parent-container">
    <div id="container">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" />
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" />
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" />
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" />
    </div>
</div>

#parent-container {
    display: table;
    width: 50%;
    margin: 0 auto;
}

#container {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    height: 200px;
    border: 1px solid blue;
    text-align: center;
}

#container img {
    display: inline-block;
    width: 30px;
}

我改变了高度，表明它是＆＃34;流体＆＃34;，无论容器大小如何。这应该适用于IE8 +，但未经过测试。

http://jsfiddle.net/rvfvt01a/1/

边距：自动到多个内嵌图像

6 个答案: