vertical-align：中/ 2图像

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

将您的元素显示为表格单元格可以解决您的问题：

#center {
    ...
    display: table;
}
#center > div {
    display: table-cell;
    vertical-align: middle;
}

Demo

Answer 2

DEMO：http://jsfiddle.net/j55dxbe3/

我会使用inline-block并确保我的inline-block元素在html中没有间隙（我使用注释来执行此操作而不是在父项上使用font-size：0px然后设置字体大小关于孩子们）。

<强> 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;
}

Answer 3

.left > img {
    margin-top: 62px;
}

较小图像上的62px的上边距将向下移动到距离页面底部约62px的位置。 Demo