Question

我正在使用Bootstrap v3.3.5。由于某种原因，我无法以响应的方式水平居中。这是我正在使用的代码。

<div class="container">
      <div style="margin:0 auto;">
          <img src="images/logo.png" alt="logo" />
      </div>
</div>

我尝试将内联CSS代码修改为

margin-left: auto; margin-right: auto;

但它也没有用。我研究并发现了关于Bootstrap的.center-block和.img-responsive，但我想它已被删除（因为我在bootstrap.css中找不到与所述类相关的任何内容）。我现在很无能为力。

Answer 1

移除图像周围的容器，并将类center-block和img-responsive添加到图像中。

通过添加.img响应类，可以使Bootstrap 3中的图像响应友好。这适用于max-width：100％;，height：auto;和显示：块;到图像，以便它很好地缩放到父元素。

要使用.img响应类的图像居中，请使用.center-block而不是.text-center。有关.center-block用法的更多详细信息，请参阅帮助程序类部分。

<div class="container">
    <img class="img-responsive center-block" src="http://placehold.it/200x100" alt="logo" />
</div>

在这个小提琴上你看到它只与引导程序一起使用：http://jsfiddle.net/sebastianbrosch/xLwbwjeo/

Answer 2

如果未指定宽度值，则块元素占据其容器宽度的100％。此外，可以通过在最近的父块元素上使用text-align:center来居中图像。这是有效的，因为图像被认为是一种内联元素。

那就是说，Bootstrap有一个text-center类，可以在这里使用。

以敏感的方式居中图像

2 个答案: