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%也不是。create。图像确实有一个具有定义高度的父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

Answer 2

垂直对齐包含图像的div而不是img标记本身，或检查一下：

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

如何垂直对齐图像

2 个答案: