css - 垂直对齐 : middle/2 images

Question

我正在努力寻找一种方法来垂直对齐两个不同列上的两个图像但我不知道该怎么做。

这里是两列的CSS:

.left {
width: 50%;
height: 100%;
float: left;
text-align: center;
}

.right {
width: 50%;
height: 100%;
float: left;
text-align: center;
}

http://jsfiddle.net/6o6zwqLb/

我想这应该很简单。

Answer 1

演示:http://jsfiddle.net/j55dxbe3/

我会使用 inline-block 并确保我的 inline-block 元素在 html 中没有间隙(我使用注释来执行此操作而不是在父级上设置 font-size:0px 然后设置字体大小对 child )。

HTML

<div id="center">

    <div class="left">
    <img src="http://placekitten.com/g/250/375" width="250" height="375" />
    </div><!-- comment to close gap
    --><div class="right">
    <img src="http://placekitten.com/g/333/500" width="333" height="500" />
    </div>

</div>

CSS:

.left, .right {
  width: 50%;
  height: 100%;
  display:inline-block;
  text-align: center;
  vertical-align:middle;
}