Как выровнять текст ссылки по центру?
Есть ссылка, которая расположена в header. Header width = 100%, height = 41px. Как центрировать текст ссылки Login/Register по высоте относительно header? И при наведении на ссылку background-color должен меняться на тёмно-зелёный.
header < background-color: rgb(0, 146, 63); box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5); position: relative; left: 0px; top: 0px; width: 100%; height: 41px; z-index: 3; vertical-align: middle; >.login_button < position: absolute; right: 5%; color: white; height: 41px; >.login_button .text
Free Shipping on Orders of Rs. 2587 - SHIP39 Login / Register
Как есть сейчас Как должно быть 
Как выровнять ссылки по центру?
Подскажите, пожалуйста, как выровнять ссылки по центру страницы с помощью css.
Если ширина экрана больше 1200 px, то отображается нормально. Если меньше 1200 px, то ссылки: «отзывы», «Информация», «Контакты», «Статьи», Корзина смещаются вниз (как бы на одну строку). Нужно эти ссылки выровнять по центру, и что бы выпадающие пункты тоже работали.

- Вопрос задан более двух лет назад
- 103 просмотра
Комментировать
Решения вопроса 1

twentytvvo @twentytvvo
nav#top .container @media screen and (max-width:1200px) < nav#top .containernav#top .container div >
Ответ написан более двух лет назад
Нравится 1 8 комментариев
Как выровнять теги в блоке по вертикали.
Приветствую. Вопрос в заголовке. Приведу пример: есть таблица высотой 200px, в ней от содержится от 1-ой до 10-ти ссылок, ссылки наделены свойством display:block, все они автоматически выравниваются по вертикали в ячейке в не зависимости от их количества. Вопрос: как выровнять ссылки по вертикали не в таблице, а в блоке в не зависимости от их количества?
На сайте с 31.05.2009
26 октября 2013, 18:59
vertical-align:middle; — для блока естественно
Опыт как иммунитет — приобретается в муках! Хостинг: экономия до 1300 руб + домен в подарок ( https://clck.ru/XLscf ) / Аудит семантики от 15К [долго] — ЛС
На сайте с 07.02.2013
26 октября 2013, 19:05
samimages:
vertical-align:middle; — для блока естественно
Сколько раз я пробовал — эта тема у меня не работает. Вот код:
.xxx border:1px solid;
padding:10px;
margin:10px;
height:200px;
vertical-align: middle;
>
a display: block;>
111
222
333
444
555
Что не так?
На сайте с 18.06.2010
26 октября 2013, 19:29
рецидивист, вертикал алижен не работает для блоков. Задайте вашему div’у: Display: table-cell; vertical-align:middle; Так будет работать
Самая трендовая ПП года — билеты на автобус (/ru/forum/885898)
На сайте с 07.02.2013
26 октября 2013, 19:33
rod-on:
рецидивист, вертикал алижен не работает для блоков. Задайте вашему div’у:
Display: table-cell;
vertical-align:middle;
Так будет работать
Спасибо. Жаль для до IE8 не работает. Есть к/н костыли?
На сайте с 28.05.2010
26 октября 2013, 19:52
рецидивист:
Спасибо. Жаль для до IE8 не работает.
Есть к/н костыли?
попробуйте погулять с line-height, но не уверен.
Нужен прогер на php+mysql+понимание чужего кода? (/ru/forum/540660) Вам сюда PHP-шаман (http://php-shaman.pw/)
На сайте с 13.09.2013
27 октября 2013, 03:53
Все эти фишки не будут работать в IE и манипуляции с display || vertical-align весьма не желательны в принципе. Делать надо так
.xxx <
border:1px solid;
height:200px;
line-height:200px; /*бинго*/
>
==== или для извращенцев
.xxx <
height:200px;
position:relative;
>
.xxx a <
position:absolute;
top:50%;
height:13px; line-height:13px; /*размер шрифта*/
margin-top:-13px;
>
На сайте с 26.04.2013
27 октября 2013, 04:08
Если вопрос с высоте, то тогда не проще ли будет сократить/увеличить кол-во ссылок? А про выравнивание — не забывайте о наследовании в css
На сайте с 07.02.2013
27 октября 2013, 05:36
provice:
Все эти фишки не будут работать в IE и манипуляции с display || vertical-align весьма не желательны в принципе.
Делать надо так
====
или для извращенцев
ну, это годится только для одной записи с заранее известной высотой, а не для случайного количества.
elina732:
Если вопрос с высоте, то тогда не проще ли будет сократить/увеличить кол-во ссылок? А про выравнивание — не забывайте о наследовании в css
