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没有高度，因此它永远不会知道垂直中心的位置。最简单的方法是在两个元素上使用inline-block帮助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>

Answer 2

垂直居中问题通常最好用display: flex解决。见https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

垂直对齐全高列中的图像

2 个答案: