display: table-cell with text-align: center

Question

Я работаю над входом, полноэкранным режимом навигации, и все работает достаточно хорошо (хотя я абсолютно открыт для идей, чтобы улучшить концепцию !). Моя проблема заключается в выравнивании по центру текста в вертикально выровненном div. Я пробовал обычный text-align: center на каждом из ul, li, a и div в предоставленном ручке, но ничего не джитсу.

Я попытался добавить DIV в Li, используя следующие, но это просто не работает, как предполагалось:

ul li a { 
    display: table; 
    height: 25vh; 
} 

ul li a div { 
    display: table-cell; 
    vertical-align: middle; 
} 

Есть мысли?

Codepen: http://codepen.io/robotsmeller/pen/OWOxor

Answer 1

вам просто нужно добавить

ul li a { 
    line-height: 25vh; 
    margin: 0 auto; 
} 

см обновленный codepen http://codepen.io/anon/pen/qRxQrm

надеюсь, что это помогает

Answer 2

Используйте этот

ul li div a { 
    margin: 0 auto; 
}