我有 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 类时,图像居中但不是水平而是垂直,当我尝试向左或向右拉时它们是水平但不居中。需要做什么?
最佳答案
假设您的图像大小合适,并且可以全部放在同一行,请尝试使用以下 CSS 属性:
img {
display:inline-block;
}
.col-xs-4 {
text-align:center;
}
但是对于 inline-block
的警告,您的 img
元素之间的所有空白都必须被删除,否则它将显示为图像之间的“空格”。
关于html - 水平居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23900219/