Как кроссбраузерно выровнять текст по центру блока?

Question

[Vladimir Lukashev]

В мозиле и в хроме свойство line-height срабатывает по-разному. Центрировал текст в блоке навигации, в хроме все нормально, а в мозиле текст съехал.

Chrome:


Mozilla:


Код можно посмотреть по ссылке

Как выровнять текст так, что бы во всех браузерах работало одинаково? Не могу найти актуальную статью.

И вот еще, на Windows шрифт плохо сглаживается, где есть актуальные статьи по этой теме? Как сделать отображение шрифта примерно одинаковым, без "кракозябр"?

Comments

[Vladimir Lukashev]

MaxKorz: а что в них плохого?

[0leg5ergeev]

https://habrahabr.ru/post/122269/ насчёт отображения шрифтов под win

[Vladimir Lukashev]

0leg5ergeev: статья 2011 года

[0leg5ergeev]

Lukavis: актуальна.

Answer 1

[Златослав Десятников]

Высоту, ширину, фон и рамки нужно указывать у li. Также у li сделать text-align: center;
У ссылки указать line-height равный высоте li для вертикального выравнивания по центру и display: inline-block и width: 100% для растягивания по ширине (чтоб кликать можно было не только на текст ссылки, а на всю "кнопку").