Question

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

我想让 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

摆脱上边距并定位头像：

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

为什么会这样？

：在元素内添加元素之前。该元素占据所有高度但由于没有宽度而不可见。然后，将vertical-align CSS属性设置为该元素，并将图像转换为垂直对齐的图像！耶！

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

2 个答案: