jQuery 如何在轮播中居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30538967/
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
How to center image in carousel
提问by Andrus
How to center image in carousel ? I tried bootstrap 3 carousel using code from bootstrap tutorial:
如何在轮播中居中图像？我使用 bootstrap 教程中的代码尝试了 bootstrap 3 carousel：
<a href="/Webconte/Details/124">
<img src="/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/123">
<img src="/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/105">
<img src="/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/95">
<img src="/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/107">
<img src="/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/100">
<img src="/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/98">
<img src="/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/78">
<img src="/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/11">
<img src="/Webconte/Image/11" />
</a>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
For wide screen, carousel image is left aligned and there is ugly empty space in right of image. How to make carousel nicer ? Is it possible to center images or other solution ?
对于宽屏，轮播图像左对齐，图像右侧有难看的空白区域。如何让旋转木马更好看？是否可以将图像或其他解决方案居中？
回答by Polynomial Proton
You've got two options
你有两个选择
If you want the image to take up entire carousel then
img { width: 100%; height: auto; }
If you dont want the image to stretch 100 %, then set your desired width(or dont, just specify margin) and margin auto:
img { width: 50%; margin: auto; }
如果您希望图像占据整个轮播，那么
img { 宽度：100%; 高度：自动；}
如果您不希望图像拉伸 100%，则设置所需的宽度（或不要，只需指定边距）和边距自动：
img { 宽度：50%; 保证金：自动；}
回答by BENARD Patrick
If you really want to follow the twitter bootstrap synthax, you should use the center-blockclass as explained in the documentation.
如果你真的想遵循 twitter bootstrap synthax，你应该使用center-block文档中解释的类。
Extract of code:
代码摘录：
<img class="center-block" src="something.xxx" alt="xxx">
回答by Daniel Hutton
Try adding this CSS to align the image to the center:
尝试添加此 CSS 以将图像与中心对齐：
.carousel-inner .item a img {
margin: auto;
}
回答by Roman Rekrut
For me this help.
对我来说这个帮助。
.carousel-item img{
width: auto;
height: 245px;
max-height: 245px;
margin: auto;
display: block;
}
