Bootstrap：如何在列中alignment内容？

一个简单的用例场景是使用映像或Bootstrap列中的任何其他内容。 而且这些内容通常需要水平居中。

<div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 text-center"> <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered"> </div> <div class="col-sm-8 col-md-8 col-lg-8"> some content not important at this moment </div> </div> </div> 

在版本3.1.0中添加类文本中心列中的图像居中。 但是为了解决一些其他问题，我不得不去3.3.4版本，现在这个行为（文本中心）已经被破坏了。 我留下了如何将图像或其他内容置于列中的问题。 我想避免必须添加类包含的元素，因为这是容易出错或需要另一个包含div。

Answer 1

想要中心的图像？ 非常简单，Bootstrap有两个类， .center-block和text-center 。

在你的图像是BLOCK元素的情况下使用前者，例如，向img添加img响应类，使img成为块元素。 如果您知道如何在Web控制台中导航并查看应用样式到元素，则应该知道这一点。

不想使用课堂？ 没问题，这里是CSS引导程序使用。 您可以创build一个自定义类或为该元素编写CSS规则以匹配Bootstrap类。

  // In case you're dealing with a block element apply this to the element itself .center-block { margin-left:auto; margin-right:auto; display:block; } // In case you're dealing with a inline element apply this to the parent .text-center { text-align:center } 

Answer 2

你可以通过添加div即centerBlock来做到这一点。 并在CSS中给这个属性居中的图像或任何内容。 这里是代码：

 <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="centerBlock"> <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered"> </div> </div> <div class="col-sm-8 col-md-8 col-lg-8"> Some content not important at this moment </div> </div> </div> // CSS .centerBlock { display: table; margin: auto; }