html - 流体布局中垂直对齐中间的问题

Question

我第一次尝试适用于所有设备的移动友好设计时遇到了麻烦，无论屏幕宽度如何。

I set up a Jsfiddle here显示我的问题

我正在尝试让 header_avatar 出现在标题的垂直中间。

.header_avatar {
-webkit-border-radius: 50% 
-moz-border-radius: 50%;
border-radius: 50%;
height:50%;
margin: 21.5% 0 0 20.5% }

在Jsfiddle你可以看到我粗略地模拟了一个半比例的 iPhone 5 和 iPad Mini 屏幕设置用于示例目的。

左侧 iPhone 示例中的头像完全对齐，但是当我在 iPad 上查看它时(右侧示例)对齐方式有很大偏差，甚至都没有对齐。

如何使头像在所有设备上均等对齐，这可能吗？我使用的方法是完全错误的，我知道为什么，因为 % 在两个设备上的距离完全不同，但我不知道如何才能实现这一目标。

任何帮助都会减轻我的头痛:)

Answer 1

这是我的解决方案，使用 :before 和 vertical-align:

http://jsfiddle.net/00adehLw/1/

CSS:

.header_left {
    float:left;
    width: 20%;
    height:100%;
}
.header_left:before {
    content: "";
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}
.header_avatar {
    -webkit-border-radius: 50% -moz-border-radius: 50%;
    border-radius: 50%;
    height:50%;
    vertical-align: middle;
}

为什么有效？

:before 在元素内部添加一个元素。该元素占据所有高度但不可见，因为没有宽度。然后，将 vertical-align CSS 属性设置为该元素，图像将转换为垂直对齐的图像!耶!