CSS实现页眉图片居中：Banner图片大屏下左偏的解决求助

我来帮你搞定这个Banner图片偏移的问题！从你的代码来看，问题出在大屏幕下图片缺少居中对齐的约束，加上Bootstrap布局结构的小疏漏，我给你几个实用的解决方案：

方案1：直接给图片添加居中样式 #

你的.img-responsive类（应该是Bootstrap的内置类）已经实现了图片自适应宽度，但块级元素默认会在父容器内左对齐。我们只需要给图片加上自动左右边距，就能让它在任何屏幕尺寸下居中：

/* 针对Banner内的响应式图片设置居中 */
.banner img.img-responsive {
  margin: 0 auto;
}

另外，你的.banner类里的background-position和background-size属性对<img>标签没用（这俩是给背景图用的），可以删掉简化样式：

.banner {
  padding-top: 150px;
  margin: 0 auto;
}

方案2：修正Bootstrap布局结构（推荐） #

如果你的项目用了Bootstrap，.row类默认带有左右负边距，而且正确的嵌套逻辑是container/container-fluid → row → col-*。你直接在row里放图片，没有用列容器，才导致大屏幕下布局偏移。调整后的规范结构如下：

<div class="banner">
  <!-- 用container约束宽度，或者container-fluid让Banner占满全屏 -->
  <div class="container">
    <div class="row">
      <!-- 用col-xs-12让列占满整行宽度 -->
      <div class="col-xs-12">
        <!-- 用Bootstrap内置的center-block类快速实现居中 -->
        <img src="Banner3.jpg" class="img-responsive center-block"/>
      </div>
    </div>
  </div>
</div>

这个方案从根源上解决了布局问题，同时符合Bootstrap的设计规范，能避免后续出现其他兼容性问题。

方案3：快速临时修复（适合不想改结构的情况） #

如果你不想调整布局结构，可以给包裹图片的.row添加text-center类，同时把图片的显示方式改成inline-block（因为text-center只对行内/行内块元素生效）：

<div class="banner">
  <div class="row text-center">
    <img src="Banner3.jpg" class="img-responsive" style="display: inline-block;"/>
  </div>
</div>

不过这个方案属于临时补丁，不如前两个方案健壮，优先推荐方案2哦~

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