在 Bootstrap 井中垂直居中 img答案

【问题标题】：Vertically middle an img in a Bootstrap well在 Bootstrap 井中垂直居中 img
【发布时间】：2015-06-02 20:33:07
【问题描述】：

我一直试图将img 放在固定高度div 的中间，但我做错了。我尝试了一些不同的变体来查看 SO 上的其他解决方案，但我认为我遗漏了一些东西。

这是我的代码和代码sn-p：

// Style
.test-ht {
  min-height: 250px;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-3 well test-ht">
      <img src="http://placehold.it/350x150" class="img-responsive" />
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

将像素高度添加到包含您的 img div 和图像的父 div，例如 img-parent，并将 height: 100% 和 display:inline-block; 添加到包装器 div，如下所示：

.img-parent  {
    height: 250px;
}
.test-ht {
  height: 100%;
  vertical-align: middle;
  display:inline-block;
}

通过-How to vertically align an image inside div

【讨论】：

【解决方案2】：

我发现在大多数情况下，通过为每个位置使用一系列自定义类，可以很容易地将项目与引导程序垂直对齐。

例子：

.align-middle {
display:table-cell;
vertical-align:middle;
float:none;
}

然后，我将该自定义类应用于我希望在该行中居中对齐的任何列。

【讨论】：

【解决方案3】：

尝试像这样更改 CSS：

.test-ht {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

【讨论】：

【解决方案4】：

我一直在尝试将img 放置在固定高度div 的中间。

从div 中删除该类并将该类添加到img。试试下面的代码 sn-p。

// Style
.test-ht {
    width: 350px;
    height: 150px;
}

.test-ht:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.test-ht :first-child {
    display:inline-block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-3 well">
      <img class="img-responsive test-ht" src="http://placehold.it/350x150" />
    </div>
  </div>
</div>

【讨论】：