将引导轮播图像定位在轮播的中心答案

【问题标题】：Position Bootstrap Carousel Image In Center of the Carousel将引导轮播图像定位在轮播的中心
【发布时间】：2018-02-02 18:15:21
【问题描述】：

我最近一直在玩 Bootstrap Carousel。我遇到了一个问题，希望图像保持响应，而不是占据我放置在其中的部分的全部宽度，但我确实希望图像本身保持我通过 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>

我正在使用 Bootstrap CDN，点击 here! 可以实时查看该部分

谢谢大家，祝你有美好的一天。

【问题讨论】：

标签： html css twitter-bootstrap carousel

【解决方案1】：

所以我给你做了一个JS小提琴，点击here查看

我所做的是选择 .carousel-item 并添加 text-align center 属性

.carousel-item {
  text-align: center
}

【讨论】：

【解决方案2】：

尝试这样使图像居中。

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

【讨论】：

我在 JS fiddle 上检查了这个，它似乎不起作用。