Bootstrap 3和div中的垂直居中响应图像

Question

如何将图像垂直居中在Div / Row中。我已经搜索过，但所有解决方案似乎都指出这是一个很好的解决方案 - 但它不会对我有用。我使用的是Bootstrap 3 ...

https://www.bootply.com/vQFalT6KxG

Answer 1

试试这个：

<div class="col-xs-12 col-xs-offset-6">
      <img src="https://image.flaticon.com/icons/png/128/149/149019.png" class="img-responsive">
</div>

Answer 2

要在div内垂直对齐图像，您必须使图像保持绝对，将顶部设置为50％并垂直平移至-50％。我希望这会有所帮助：

<强> HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

<强> CSS：

.vertical-align-img{
    height: 500px;
    position: relative;
}

.vertical-align-img img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

或者您可以使用display: table-cell;。将显示设置为表格单元格，并将verical-align设置为middle。

<强> HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

<强> CSS

.vertical-align-img{
    display: table-cell;
    height: 500px;
}