水平中心图像

Question

我有3个图像，我想要在一个div内水平居中，所以它们需要居中和相邻。

这是我的代码：

<div class="container">
<div class="row">
        <div class="col-xs-4 col-xs-offset-4" >

            <img class="img-responsive  " src="images/slike/pic1.png" alt=""/>
            <img class="img-responsive   " src="images/slike/pic2.png" alt=""/>

            <img class="img-responsive  " src="images/slike/pic3.png" alt=""/>      

        </div>
    </div>
            </div>

当我尝试中间块类时，图像是居中的，但不是水平的，而是垂直的，当我尝试拉左或右时，它们是水平的，但不需要做centered.What？

Answer 1

假设您的图像大小适当，并且都可以放在同一行上，请尝试使用以下CSS属性：

img {
    display:inline-block;
}

.col-xs-4 {
    text-align:center;
}

但是对于inline-block的警告，您的img元素之间的所有空白都必须删除，否则它将显示为图像之间的“空格”。

Answer 2

只需将text-align:center应用于父容器即可。

img是一个默认情况下，内联块元素，它将受到文本对齐属性的影响：

.col-xs-4 {
    text-align:center;
}

这里有个小酒馆在行动中演示了它。