CSS вертикальный центр встроенный элемент?

Question

Здравствуйте, я не могу получить привязку, вертикально центрированную в неупорядоченном списке. Мой CSS является:

*{ margin: 0; padding: 0;} 

html { 
    height: 100%; 
    font-size: 16px; 
} 

body { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 62.5%; 
    background-color:rgba(0,0,0, 0.7); 
    height: 100%; 
} 

.container { 
    margin-left: 9.814814814814815%; /* 106/1080 */ 
    margin-right: 10.092592592592593%; /* 109/1080 */ 
    width: 80%; /* 864/1080 */ 
    height: 100%; 
} 

nav ul{ 
    list-style-type: none; 
} 

nav ul li { 
    display: inline-block; 
} 

nav ul li a { 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 2em; 
} 

nav { 
    background-color: black; 
    margin-top: 5.0595238095238096%; /* 85/1680 */ 
    height: 5.476190476190476%; /* 92/1680 */ 
} 

Тогда вот мой HTML:

<div class="container"> 
    <nav> 
     <ul> 
      <li><a href="/">home</a></li> 
      <li><a href="/get_involved">get involved</a></li> 
     </ul> 
    </nav> 
</div> 

Answer 1

Для достижения "вертикального центрирования", добавить либо высоту строки или отступы для ваших <a> элементов:

nav ul li a { 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 2em; 
    padding: 10px 0; 
} 

You также может регулировать высоту родительского элемента <li> для точной настройки «центрирования».