如何使图像在轮播中居中？
我使用 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>
对于宽屏幕，轮播图像左对齐，图像右侧有难看的空白区域。
如何让轮播变得更好看？是否可以将图像居中或其他解决方案？
我知道我已经迟到了，但万一有人今天正在寻找答案，我刚刚发现对我来说最好的解决方案是将图像放在单独的 div 中.carousel-item然后使用将其居中flex:
<div class="carousel-item">
<div class="d-flex justify-content-center">
<img src="img.png" alt="img.png">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
