在 HTC 更宽更高的屏幕上，Bootstrap 3 中的中心图像答案

【问题标题】：Center image in Bootstrap 3 on a HTC wider and taller screen在 HTC 更宽更高的屏幕上，Bootstrap 3 中的中心图像
【发布时间】：2014-12-23 19:37:52
【问题描述】：

我的图像不会居中对齐。我确定我做错了什么。我怎样才能使这个图像居中？我尝试过样式、自动边距、中心块、中心文本等。没有任何效果。

在所有小型移动设备上，320 像素的图像居中且全宽，但那些较大的移动设备（更宽的 iPhone、HTC、GalaxyS5 等） - 左对齐。

<header id="about2" class="about-mobile visible-xs hidden-sm" style="background-color:#20aab4; margin-top:0;height:661px;">
  <div class="text-vertical-center" style="margin-top:0;">
    <div class="visible-xs " style="z-index:1;">
      <div id="num10" class="visible-xs">
        <BR>
        <BR>
        <img src="images/homepage/INTROs_AboutUs_Mobile.png" class="img-responsive center-block" alt="" width="320" height="661" usemap="#MapAboutUs" />
        <map name="MapAboutUs">
          <area shape="rect" coords="66,237,147,270" href="our-story/index.html">
          <area shape="rect" coords="153,239,257,267" href="our-navigators/index.html">
        </map>
      </div>
    </div>
  </div>
</header>

【问题讨论】：

postimg.org/image/fi17xpjfx

标签： android html css twitter-bootstrap

【解决方案1】：

hard 中的 width="320" height="661" 定义了图像的宽度和高度。在宽度为 320 的较小屏幕上。 width="320" 与 320px 宽度匹配，因此它会填充宽度，但由于明显的原因，对于较大的屏幕，它现在会填充。这就是为什么您不再希望使用内联样式和为标签定义宽度和高度，并将所有内容放入单独的 .CSS 文件中。尝试用...做同样的事情

   img {width:100%;height:auto}

这将采用父元素标签的宽度。然后适当调整高度。

【讨论】：

谢谢。我试过了，但它不起作用。你能具体告诉我在哪里添加吗？如果我在顶层做 - 所有图像都希望是 100% 宽度。另外-我希望图像居中，不必拉伸 100% 宽度。
删除标签中的 width="320" height="661"。您的 'center-block' 类只是一个将其定义为 display:block 并为其提供自动左右边距的类。因此，如果在删除宽度和高度后它没有居中，请使用浏览器检查元素并检查左右边距是否相同。如果它们不是，那么某些东西会覆盖它们。