使用 CSS 网格系统 (Bootstrap 3) 时无法居中图像答案

【问题标题】：Cannot center image when using CSS Grid System (Bootstrap 3)使用 CSS 网格系统 (Bootstrap 3) 时无法居中图像
【发布时间】：2018-01-14 04:31:21
【问题描述】：

当宽度约为计算机大小时，我似乎无法将图像居中。但是，当宽度小于手机等计算机屏幕时，图像可以完美居中。我不知道它为什么这样做。请看看这个。

https://codepen.io/danii956/pen/PKbgGJ?editors=1100

<div id="introImg" class="col-xs-4 text-center center-block">
   <div class="row text-center center-block">
    <img class="col-xs-12 img-responsive center-block" src="https://images.pexels.com/photos/8809/light-red-white-home.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="A picture of Young Jae taken in front of University of Illinois quad">
   </div>
</div>

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

这是因为 .col-xs-12 类像所有其他 .col-* 类一样添加了一个 float: left;，只需将此 CSS 添加到您的图像即可解决问题。

#introImg img.col-xs-12 {
    float: none;
}

这将使您的.center-block 类执行其功能，但如果图像现在小于 250 像素，则使用浮动，它会向左对齐。浮动没有它在中间对齐。

【讨论】：

谢谢！我不知道 col 类有浮动附着在它们上面。