【问题标题】：Bootstrap responsive image will not stay in center引导响应图像不会停留在中心
【发布时间】：2016-07-07 01:15:57
【问题描述】：

我正在尝试在引导网格中排列三张图片。在我向其中一个图像添加一个 img-responsive 类之前，所有图像都居中，这就是我想要做的。然而，我确实希望图像能够响应，同时也使它们比它们已经大一点。尝试了很多东西，例如“宽度：200%；”但是没有成功

外观

我在我的 css 中创建了一个“center-all”类，应该将它们三个都居中，并且它确实有效，直到我将 img-responsive 类添加到红色类中。该类未添加到任何其他图像中。

.center-all {
  text-align: center;
  align-items: center;
  align-content: center
  vertical-align: center;
}

JSFiddle

https://jsfiddle.net/8a6ee7f5/

图像在 Fiddle ofc 中不起作用。

我想要达到的目标：

我希望图像比它们当前的大小大 2 倍，并且我希望它们在保持居中的同时具有响应性。

提前致谢！

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

我找到了问题的答案。

将 img-responsive 类添加到图像时，它会向左移动。通过将“center-block”添加到图像的类中，它应该保持在中心。

<img src="..." class="img-responsive center-block">

现在我只需要找到如何将图片放大到 200% 的答案。

编辑：我发现以下内容可以提升我的图像：

CSS

.wrapper {
  width: 40%;
}

并将其添加到我的图像类中。

HTML

<img src="..." class="img-responsive center-block wrapper">

这样就解决了。

【讨论】：

【解决方案2】：

所以 bootstrap 已经有一个名为 .text-center 的元素居中类，您只需将该类添加到包裹您的项目的行中，该行中的所有内容都将居中。然后，您可以不使用.img-responsive，而是为图像添加宽度，或者为图像提供百分比宽度。它可能看起来像下面这样，希望这就是你要找的：

这是一个小提琴Updated Fiddle

注意：我为您的图像添加了 50% 的边框半径，因为我假设您希望它们是圆形的。如果你想使用 100px，你可以改回来。

CSS：

#values img{
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 80%;
}
#val1 {
  background-color: #792c24;
}

#val2 {
  background-color: #4f5e6d;
}

#val3 {
  background-color: #665e25;
}

HTML：

<div class="container" id="values">
  <h3 class="fancy">Values</h3>
  <div class="row text-center">
    <div class="col-sm-4">
      <h4>Independent</h4>
      <img id="val1" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Team Player</h4>
      <img id="val2" src="http://placehold.it/300x300">
    </div>
    <div class="col-sm-4">
      <h4>Dedicate</h4>
      <img id="val3" src="http://placehold.it/300x300">
    </div>
  </div>
</div>

【讨论】：