html - 如何垂直对齐图像

Question

我正在尝试垂直对齐 div 中的图像，但我尝试的所有方法都不起作用。

我试图将它置于 material design lite 的中心单元格。

这是我的代码:

CodePen

HTML:

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <div class="imgholder">
    <img src="http://i.stack.imgur.com/kq8EX.png" id="stackimg">
    </div>
  </div>
</div>

CSS:

.mdl-cell{
  border: 1px solid black;
}
.imgholder{
  width: 100%;
  height:100%;
}
#stackimg{
  width:50%;
  float: right;
  position: reletive;
  top:50%;
  vertical-align: middle;
}

Vertical-align: middle 没有做任何事情。 top: 50% 也不是。该图像确实有一个定义了高度的父 div，所以我不确定为什么它不起作用。

感谢任何帮助。

Answer 1

您可以使用 translateY() 将图像垂直居中.给你的容器一个 position: relative; 然后将 position: absolute; 和 transform: translateY(-50%); 一起分配给你的图像.

CSS

.imgholder{
  width: 100%;
  height: 100%;
  position: relative;
}

#stackimg{
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

CodePen