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>

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

Answer 1

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

img {
    display:inline-block;
}

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

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

Answer 2

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

img是inline-block element by default，会受到text-align属性的影响：

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

Here's a Fiddle 展示了它的实际效果。

水平居中图像

2 个答案: