twitter-bootstrap 使用引导程序在页面上制作图像中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20012366/
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
Make an image center on the page with bootstrap
提问by user2948950
I am using the latest version of bootstrap and I am trying to get my image dead center on the page in a carousel.
我正在使用最新版本的引导程序，并且我试图将我的图像置于轮播页面中的死点中心。
I placed the containerclass in the main div of the carousel but it is still off centered to the left of the page?
我将container课程放在轮播的主 div 中，但它仍然偏离页面左侧的中心？
My code for the carousel is below:
我的轮播代码如下：
<!-- Main Carousel -->
<div id="carousel-example-generic" class="carousel slide container" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass">
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
<!-- End Main Carousel -->
From what I found on the internet is that the containerclass is supposed to center everything on the page. So what has happened here, and how can I fix it?
从我在互联网上发现的是，container课程应该将所有内容都放在页面上。那么这里发生了什么，我该如何解决？
I also tried wrapping the entire carousel around the following code, but the same result was achieved.
我还尝试将整个轮播环绕在以下代码中，但获得了相同的结果。
<div class="container">
<!-- Carousel inside here -->
</div>
回答by rayraywillyeh
For Bootstrap 3, class="img-responsive center-block" will do it.
对于 Bootstrap 3， class="img-responsive center-block" 会这样做。
Just add it for all your images like so: <img class="img-responsive center-block" src="assets/img/carousel/slide01.jpg">
只需为您的所有图像添加它，如下所示： <img class="img-responsive center-block" src="assets/img/carousel/slide01.jpg">
回答by dphaener
Try using the grid layout that comes with bootstrap. Add the following classes after "item-active" - "col-lg-6 col-lg-offset-3"
尝试使用 bootstrap 附带的网格布局。在“item-active”-“col-lg-6 col-lg-offset-3”之后添加以下类
<!-- Main Carousel -->
<div id="carousel-example-generic" class="carousel slide container" data-ride="carousel">
<div class="carousel-inner">
<div class="item active col-lg-6 col-lg-offset-3">
<img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass">
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
<!-- End Main Carousel -->
You might also try applying a class to the same div and set "margin: 0 auto;". That may also work for you.
您也可以尝试将一个类应用于同一个 div 并设置“margin: 0 auto;”。这也可能对你有用。
回答by Dillmo
The best way to achieve perfect horizontal centering is to use margin: 0 auto. Here's what your code would look like:
实现完美水平居中的最佳方法是使用margin: 0 auto. 您的代码如下所示：
<div id="carousel-example-generic" class="carousel slide container" data-ride="carousel" style="margin: 0 auto;">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass">
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
If you don't like that solution, you could also use this:
如果你不喜欢那个解决方案，你也可以使用这个：
<div id="carousel-example-generic" class="carousel slide container" data-ride="carousel" style="display: flex; justify-content: center;">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass">
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
However, that uses a relatively new specification that isn't supported by all browsers. For more information on FlexBox, see here.
但是，它使用了一种并非所有浏览器都支持的相对较新的规范。有关 FlexBox 的更多信息，请参见此处。
回答by santosh
add this in to your custom css file
将此添加到您的自定义 css 文件中
.img-responsive { margin: 0 auto; }
.img-responsive { margin: 0 auto; }
回答by Rahul Bhalekar
.center {
margin: auto;
width: 50%;
text-align:center;
}
