旋转木马中心位置的引导旋转木马图像

Question

我最近一直在玩自带旋转木马。我已经意识到了一个问题，就是希望图像保持响应性，而不是取我放置在里面的部分的全部宽度，但我确实希望图像本身保持它的纵横比，这是我通过CSS所做的。我只是想不出如何将图像直接放在div的中心。

这是我的CSS

.carousel-image {
display: block;
max-width:460px;
max-height:190px;
width: auto;
height: auto;

}

这是HTML

<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="carousel-image" src="images/placeholder.png" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
            <h3 class="text-success">...</h3>
            <p class="text-success">...</p>
        </div>
   </div>

我使用的是引导CDN，单击这里!可以看到这个部分。

谢谢大家，祝你们今天愉快。

Answer 1

所以我为您做了一个JS小提琴，点击这里查看它

我所做的是选择..carousel项并添加文本对齐中心属性

.carousel-item {
  text-align: center
}

Answer 2

试着用这个来对图像进行居中。

.carousel-image {
  margin:0 auto;
  max-width:460px;
}