Html 让 Bootstrap 的 Carousel 既居中又响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19582340/
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 Bootstrap's Carousel both center AND responsive?
提问by Luke Vo
I want my carousel images to be at the center (horizontally), which is not by default. I follow the solution at this topic.
我希望我的轮播图像位于中心（水平），这不是默认的。我按照这个主题的解决方案。
However, using this solution, when the carousel is resized and smaller than the image, the image is cropped instead of scaling as default.
但是，使用此解决方案，当轮播被调整大小并小于图像时，图像将被裁剪而不是默认缩放。
How can I both center my image, but keep it to stretch to the carousel item?
我怎样才能让我的图像居中，但保持它伸展到旋转木马项目？
回答by Olivier
Now (on Boostrap 3 and 4) its simply :
现在（在 Boostrap 3 和 4 上）它很简单：
.carousel-inner img {
margin: auto;
}
回答by Ryan
I assume you have different sized images. I tested this myself, and it works as you describe (always centered, images widths appropriately)
我假设您有不同大小的图像。我自己对此进行了测试，它按您的描述工作（始终居中，图像宽度适当）
/*CSS*/
div.c-wrapper{
width: 80%; /* for example */
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/600x400">
<div class="carousel-caption">
hello
</div>
</div>
<div class="item">
<img src="http://placehold.it/500x400">
<div class="carousel-caption">
hello
</div>
</div>
<div class="item">
<img src="http://placehold.it/700x400">
<div class="carousel-caption">
hello
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
This creates a "jump" due to variable heights... to solve that, try something like this: Select the tallest image of a list
由于高度可变，这会产生“跳跃”……要解决这个问题，请尝试以下操作：选择列表中最高的图像
Or use media-query to set your own fixed height.
或者使用 media-query 设置你自己的固定高度。
回答by rox
On Boostrap 4 simply add mx-autoto your carousel image class.
在 Boostrap 4 上只需添加mx-auto到您的轮播图像类。
<div class="carousel-item">
<img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>
Combine with the samples from the bootstrap carousel documentationas desired.
根据需要与bootstrap carousel 文档中的示例相结合。
回答by Adrian Cumpanasu
add this
添加这个
.carousel .item img {
left: -9999px; /*important */
right: -9999px; /*important */
margin: 0 auto; /*important */
max-width: none; /*important */
min-width: 100%;
position: absolute;
}
And of course one of the parent divs needs to have a position:relative, but I believe it does by default.
当然，其中一个父 div 需要有一个 position:relative，但我相信默认情况下是这样。
See it here: http://paginacrestinului.ro/
在这里看到它：http: //paginacrestinului.ro/
回答by Escendrix
Add a class to each image in the carousel html code, then with css apply margin: 0 auto.
在carousel html 代码中为每个图像添加一个类，然后使用css apply margin: 0 auto。
回答by FrickeFresh
.carousel-inner > .item > img {
margin: 0 auto;
}
This simple solution worked for me
这个简单的解决方案对我有用
回答by Vince2017
By using this on bootstrap 3:
通过在引导程序 3 上使用它：
#carousel-example-generic{
margin:auto;
}
回答by Joe Connor
Was having a very similar issue to this while using a CMS but it was not resolving with the above solution. What I did to solve it is put the following in the applicable css:
使用 CMS 时遇到了与此非常相似的问题，但无法通过上述解决方案解决。我为解决它所做的是将以下内容放在适用的 css 中：
background-size: cover
and for placement purposes in case you are using bootstrap, I used:
如果您使用引导程序，为了放置目的，我使用了：
background-position: center center /* or whatever position you wanted */
回答by Gabriel Gates
None of the above solutions worked for me. It's possible that there were some other styles conflicting.
以上解决方案都不适合我。可能还有其他一些风格相互冲突。
For myself, the following worked, hopefully it may help someone else. I'm using bootstrap 4.
对我自己来说，以下是有效的，希望它可以帮助别人。我正在使用引导程序 4。
.carousel-inner img {
display:block;
height: auto;
max-width: 100%;
}
回答by khadim husen
This work for me very simple just add attribute align="center". Tested on Bootstrap 4.
这对我来说非常简单，只需添加属性 align="center"。在 Bootstrap 4 上测试。
<!-- The slideshow -->
<div class="carousel-inner" align="center">
<div class="carousel-item active">
<img src="image1.jpg" alt="no image" height="550">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="no image" height="550">
</div>
<div class="carousel-item">
<img src="image3.png" alt="no image" height="550">
</div>
</div>
