css - vertically align horizontal li

Question

Я пытаюсь вертикально централизовать элемент a: внутри li в навигационном меню wordpress, однако мне это не удалось добиться.

код я использую: CSS

.site-menu ul:before, .site-menu ul:after { content: ""; display: table; } 
.site-menu ul:after { clear: both; } 
.site-menu ul { *zoom: 1; } 

.site-menu .menu ul li{ 
    list-style: none; 
    float:left; 
    border-right: 1px solid #7B7B7B; 
    height:100%; 
} 

.site-menu ul{ 
    height:10%; 
    border: 1px solid #000; 
} 

.site-menu .menu ul li a{ 
    margin-right:5px; 
    margin-left:5px; 
} 

.site-menu .menu ul li:last-of-type{ 
    border-right:none; 
} 

.site-menu a:link, 
.site-menu a:visited{ 
    text-decoration: none; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 110%; 
    color: #C5C5C5; 
    vertical-align: bottom; 

} 

.site-menu li:hover{ 
    color: #00FF99; 
    background: #5A5A5A; 
} 

HTML

<nav class="site-menu"> 
        <?php wp_nav_menu('title_li=');?> 
</nav> 

Может быть что-то очень простое, однако я не в состоянии добраться до нижней части, если ,

Спасибо заранее, J

Answer 1

Так происходит ваш CSS Я предполагаю, что .site-menu .menu ul li a элемент, который вы хотите центрировать? Во всяком случае, в общем, вы можете центрирования детям любого элемента таким образом:

display: flex; 
align-items: center; /* To center vertically */ 

Более подробную информацию можно найти here.