Question

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

以下是我的代码和代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

示例：

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

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

Answer 2

将像素高度添加到包含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;
}

Via- How to vertically align an image inside div

Answer 3

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

从div中删除该类，并将该类添加到img。请尝试以下代码段。

＆＃13;

// 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;
}

＆＃13;

<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>

＆＃13;

Answer 4

尝试更改CSS，如下所示：

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

垂直中间是一个Bootstrap井中的img

4 个答案: