html - 水平居中图像

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>

当我尝试 center-block 类时，图像居中但不是水平而是垂直，当我尝试向左或向右拉时它们是水平但不居中。需要做什么？

Answer 1

假设您的图像大小合适，并且可以全部放在同一行，请尝试使用以下 CSS 属性:

img {
    display:inline-block;
}

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

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