Bootstrap 3.3.7轮播组件图片左对齐：如何实现居中显示？

我完全懂你碰到的这个麻烦——把Bootstrap的Carousel放进占满整页的12列网格里，结果里面的图片死活左对齐，怎么都没法居中。结合你用的Bootstrap 3.3.7版本，我给你几个靠谱的解决办法：

方法一：给Carousel内的图片添加自动居中样式 #

这是最直接的方案，针对img标签本身设置居中样式。你只需要在自定义CSS里加上这段代码：

.carousel-inner img {
    margin: 0 auto;
}

原理很简单：图片默认是块级元素，margin: 0 auto会让它在父容器（也就是Carousel的item）里水平居中，前提是图片的宽度小于容器宽度。记得把这段CSS放在Bootstrap官方CSS文件之后加载，保证样式优先级更高。

方法二：用背景图方式实现居中（适合大尺寸图片） #

如果你的图片尺寸比Carousel容器大，想让图片居中裁剪、保持比例填满容器，推荐用背景图的方式替换img标签：
修改Carousel的item结构：

<div class="item" style="background-image: url('你的图片路径.jpg'); height: 100vh; background-position: center center; background-size: cover;">
    <!-- 这里不再需要img标签 -->
</div>

• height: 100vh让Carousel占满整个视口高度，你也可以改成固定像素值（比如600px）
• background-position: center center确保图片始终居中显示
• background-size: cover让图片按比例缩放，填满整个item容器，超出部分会被裁剪

方法三：清除网格列的默认内边距 #

Bootstrap的col-md-12默认带有padding-left和padding-right，可能导致Carousel没有完全占满页面宽度，间接影响图片居中。你可以给列添加一个自定义类来清除内边距：
先写CSS：

.full-width-col {
    padding-left: 0;
    padding-right: 0;
}

然后修改网格列的代码：

<div class="col-md-12 full-width-col">
    <!-- 你的Carousel组件放在这里 -->
</div>

这样Carousel就能完全贴合页面边缘，图片居中的效果会更准确。

你可以根据自己的图片尺寸和需求选择上面的方法，亲测在Bootstrap 3.3.7和Firefox环境下都能正常生效~

内容的提问来源于stack exchange，提问作者stameni