css - verticaly align horizontal li

Question

I'm trying to vertically centralize an a: element within an li in a wordpress navigational menu, however I wasn't successful in achieving this.

The code I'm using is: 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>

Might be something really simple however i'm unable to get to the bottom of if.

Thanks in advance, J

Answer 1

So going by your CSS I'm guessing that .site-menu .menu ul li a is the element that you wish to center? Anyway, in general you can center the children of any element this way:

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

More information can be found here.