如何垂直对齐图像

Question

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

我正在尝试将其置于 material design lite 单元格的中心。

这是我的代码：

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

垂直对齐 div 包含图像而不是 img 标签本身，或者检查这个：

> `http://jsfiddle.net/kizu/4RPFa/4570/`

Answer 2

您可以使用 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

如何垂直对齐图像

How to vertically align image

html

css

material-design-lite