Проблемы с вертикальным выравниванием по середине в макете текучей среды

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

Вот мое решение, используя: до и вертикального выравнивания:

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

Почему это работает?

: перед добавлением элемента внутри элемента. Этот элемент занимает всю высоту, но не отображается, поскольку ширина отсутствует. Затем, устанавливая свойство CSS с вертикальным выравниванием для этого элемента, и изображение преобразуется в изображение с вертикальным выравниванием! Ура!

Answer 2

Избавьтесь от верхнего края и положение аватар:

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

См Fiddle.

top: 50% позиционирует его на половине высоты контейнера, а преобразование перемещает его на половину высоты.