Question

我试图将我设置为div的行类中的三个图像居中。我正在使用bootstrap，但我没有找到一种方法来集中每个col-md- #class组件的内容。我该如何集中内容？我的代码如下：

<div class="jumbotron">
       <div class="container">
           <div class="row">
               <div class="col-md-4">
                    <img src="img/1.png"> <br />
               </div>
               <div class="col-md-4">
                   <img src="img/2.png"> <br />
               </div>
               <div class="col-md-4">
                    <img src="img/3.png"> <br />
               </div>
            </div>
          </div>
       </div>
</div>

感谢。我已经尝试了许多方法甚至内联样式格式，但它不起作用。

Answer 1

尝试在列上使用文本中心类。请注意，它只会使内联元素居中，因此它实际上对您有效取决于列中的内容。

它适用于基本图像。

Answer 2

将此添加到您的css img

.col-md-4 img {
display:block;
margin:auto;
}

它会起作用

demo here

col-md-＃组件的中心内容

2 个答案: