Вертикальной выравнивания навигация значок/кнопка в заголовке

^^^Вертикальной выравнивания навигация значок/кнопка в заголовке

Это не решает мой вопрос моей ситуация отличается тем, что анимационная кнопкой навигации CSS. Может заставить его работать так: display: table-cell и vertical-align: middle; и т. д.

У меня есть отзывчивый заголовок, который показывает навигационную кнопку, когда в мобильном размере, где вы можете отображать остальную часть пунктов меню (отключенный в примере не нужен для моего вопроса).

Поскольку я собираюсь сделать отзывчивый заголовок высотой, это означает, что кнопка навигации всегда центрирована по вертикали. Теперь он помещается в центр с верхним краем 20 пикселей и потому, что кнопка имеет высоту 20 пикселей, а заголовок имеет 60 пикселей, он центрирован, но это не сработает, если высота заголовка изменится.

-->FIDDLE

enter image description here

Код:

<header> 
<nav> 
    <div class="col-nav"> 
     <a href="#" class="nav-btn"><span class="nav-icon"></span></a>   
     <a href="#" class="home">Name</a> 
    </div> 
    <ul> 
     <li class="col-nav"><a href="#">Item1</a></li> 
     <li class="col-nav"><a href="#">Item2</a></li> 
     <li class="col-nav"><a href="#">Item2</a></li> 
    </ul> 
</nav> 
</header>

источник

2015-02-19 KP83

возможно дубликат [вертикального выравнивания элементов в DIV] (http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) –

Я видел это, но не могу заставить его работать в моей ситуации. Вы знаете? – KP83

Если вы сделаете демоверсию с вашим текущим CSS, мы сможем предложить предложения. –

Если вы можете установить его положение родителя к relative, то вы можете быть в состоянии использовать

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

на кнопку

источник

2015-02-24 14:02:26

Здесь я не приводил подробностей, поэтому я ожидаю, что мой ответ будет украден в ближайшее время, если кто-то захочет добавить еще несколько слов и яркую раскладку. –

Спасибо, что это сделал трюк: '.nav-btn { display: none; позиция: абсолютная; верх: 50%; -webkit-transform: translateY (-50%); -moz-transform: translateY (-50%); transform: translateY (-50%); цвет фона: прозрачный; } ' – KP83

Вы можете попробовать, как этот DEMO Просто измененного значения маржи

CSS:

.nav-icon { 
    position: relative; 
    margin-top: 7px;   
}

источник

2015-02-19 09:39:18

Нет, это не то, что я имею в виду в моем примере, значок/кнопка навигации уже центрирована по вертикали, и это делается с верхним краем 20 пикселей, потому что nav-btn = 20px height и header = 60px, но я хочу сделать заголовок изменения высоты с разными точками останова. Мне нужно, чтобы значок был центрирован буквально, а не так, как сейчас. – KP83

Вертикальной выравнивания навигация значок/кнопка в заголовке

ответ

Смежные вопросы