Html Bootstrap：如何在列内居中对齐内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30526822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: How to center align content inside column?
提问by f470071
A simple use case scenario is to use an image, or any other content inside a Bootstrap column. And often this content needs to be horizontally centered.
一个简单的用例场景是在 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>
In version 3.1.0 adding class text-center centered the image inside column. But I was forced to go to version 3.3.4 in order to fix some other issues and this behavior (text-center) is now broken. I am left with the problem how to center an image or other content inside a column. I would like to avoid having to add class to contained elements as this is error prone or requires another containing div.
在 3.1.0 版中，添加类 text-center 使列内的图像居中。但是我被迫升级到 3.3.4 版以解决其他一些问题，并且这种行为（文本中心）现在已被破坏。我遇到了如何将图像或其他内容置于列中的问题。我想避免必须向包含的元素添加类，因为这很容易出错或需要另一个包含 div。
回答by Alexander Solonik
Want to center an image? Very easy, Bootstrap comes with two classes, .center-blockand text-center.
想要将图像居中？很简单，Bootstrap 有两个类，.center-block和text-center.
Use the former in the case of your image being a BLOCKelement, for example, adding img-responsiveclass to your imgmakes the imga block element. You should know this if you know how to navigate in the web console and see applied styles to an element.
在您的图像是BLOCK元素的情况下使用前者，例如，将img-responsive类添加到您的img使img一个块元素。如果您知道如何在 Web 控制台中导航并查看元素的应用样式，那么您应该知道这一点。
Don't want to use a class? No problem, here is the CSS bootstrap uses. You can make a custom class or write a CSS rule for the element to match the Bootstrap class.
不想使用类？没问题，这里是 CSS 引导程序使用。您可以为元素创建自定义类或编写 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
}
回答by Ahmad Sharif
You can do this by adding a div i.e. centerBlock. And give this property in CSS to center the image or any content. Here is the code:
您可以通过添加一个 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;
}
