我希望我的轮播图像位于中心（水平），默认情况下不是这样。我遵循这个主题的解决方案。
但是，使用此解决方案时，当轮播被调整大小并小于图像时，图像会被裁剪而不是默认缩放。
我怎样才能使我的图像居中，但保持它伸展到轮播项目？
问问题
153783 次
13 回答
76
现在（在 Boostrap 3+ 上）它很简单：
.carousel-inner img {
margin: auto;
}
于 2015-02-01T17:17:17.713 回答
34
我假设您有不同大小的图像。我自己对此进行了测试，它可以按照您的描述工作（始终居中，图像宽度适当）
/*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>
由于高度可变，这会产生“跳跃”......要解决这个问题，请尝试以下操作：选择列表中最高的图像
或者使用 media-query 设置您自己的固定高度。
于 2013-10-25T07:12:58.943 回答
17
在 Boostrap 4 上，只需添加mx-auto到您的轮播图像类。
<div class="carousel-item">
<img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>
根据需要结合引导轮播文档中的示例。
于 2017-08-29T09:13:22.953 回答
3
添加这个
.carousel .item img {
left: -9999px; /*important */
right: -9999px; /*important */
margin: 0 auto; /*important */
max-width: none; /*important */
min-width: 100%;
position: absolute;
}
当然，其中一个父 div 需要有一个 position:relative，但我相信默认情况下会这样做。
在这里看到它：http: //paginacrestinului.ro/
于 2014-03-22T19:02:07.070 回答
3
在轮播 html 代码中为每个图像添加一个类，然后使用 css apply margin: 0 auto。
于 2014-10-22T07:02:42.753 回答
3
.carousel-inner > .item > img {
margin: 0 auto;
}
这个简单的解决方案对我有用
于 2016-01-13T18:41:45.570 回答
2
这项工作对我来说非常简单，只需添加属性 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>
编辑：-
align 属性已弃用，请使用 CSS 属性。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align
于 2020-04-03T19:44:59.270 回答
1
在使用 CMS 时遇到了与此非常相似的问题，但上述解决方案无法解决。我为解决它所做的是将以下内容放在适用的 css 中：
background-size: cover
如果您使用引导程序，出于放置目的，我使用了：
background-position: center center /* or whatever position you wanted */
于 2015-07-21T00:42:31.960 回答
1
通过在引导程序 3 上使用它：
#carousel-example-generic{
margin:auto;
}
于 2016-11-17T04:02:43.460 回答
1
以上解决方案都不适合我。可能还有其他一些样式冲突。
对我自己来说，以下工作，希望它可以帮助别人。我正在使用引导程序 4。
.carousel-inner img {
display:block;
height: auto;
max-width: 100%;
}
于 2018-07-17T22:39:20.390 回答
0
尝试为轮播中的图像指定宽度（百分比）？
.item img {
width:100%;
}
于 2013-10-25T06:54:01.637 回答
0
我已经<div class="carousel" id...>用类容器（<div class="container"><div class="carousel" id="my-carousel">...</div></div>）放置了另一个 div。那也解决了。
于 2015-08-28T14:33:12.753 回答
0
在 bootstrap v4 中，我使用旋转木马 img 居中并填充到屏幕上
<img class="d-block mx-auto" max-width="100%" max-height="100%">
很确定这需要设置父元素的高度或宽度
html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
于 2016-11-21T05:09:45.030 回答