html - 在全高列中垂直对齐图像

Question

给定以下布局:

.half-side {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.leftbox {
    margin: 0px auto;
}

.rightbox {
    margin: 0px auto;
}

<div class="half-side">
  <div class="leftbox">
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
  </div>
</div><!--
--><div class="half-side">
  <div class="rightbox">
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
  </div>
</div>

Here's a Fiddle .

如何让我的图片垂直居中？

如您所见，我尝试了 vertical-align: middle 但无济于事。坦率地说，我真的不明白为什么这行不通。

我到处都看到这个“技巧”——以及使用负转换的类似方法:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这会导致图像被推到页面顶部的一半。

如何垂直对齐两列中的内容？

Answer 1

在您的代码中，您的 div 没有高度，因此它永远不会知道垂直中心在哪里。最简单的 hack 是在两个元素上使用 inline-block helper 和 height: 100% 和 vertical-align: middle。

这里是完整的代码解决方案:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.half-side {
  width: 50%;
  height: 100%;
  display: inline-block;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

img {
  vertical-align: middle;
}

.leftbox {
  margin: 0px auto;
  height: 100%;
}

.rightbox {
  margin: 0px auto;
  height: 100%;
}

<div class="half-side">
  <div class="leftbox">
    <span class="helper"></span>
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
  </div>
</div><!--
--><div class="half-side">
  <div class="rightbox">
    <span class="helper"></span>
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
  </div>
</div>