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

Question

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

我正在尝试让 header_avatar 出现在 header.

的垂直中间

.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 迷你屏幕设置用于示例目的。

左侧 iPhone 示例中的头像完全对齐，但是当我在我的 iPad（右侧示例）中查看它时，对齐就偏离了，甚至没有关闭。

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

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

Answer 1

去除上边距并定位头像：

position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 0 0 21.5%

参见Fiddle。

top: 50% 将其定位在容器高度的一半处，转换将其向上移动其高度的一半。

Answer 2

这是我的解决方案，使用 :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 在元素内部添加一个元素。该元素占据所有高度但不可见，因为没有宽度。然后，将垂直对齐 CSS 属性设置为该元素，图像将转换为垂直对齐的图像！耶！

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

Problems vertically aligning middle in fluid layout

html

css

mobile

fluid-layout