html - css - 垂直对齐水平 li

Question

我试图在 wordpress 导航菜单的 li 中垂直集中一个 a: 元素，但是我没有成功实现这一点。

我使用的代码是: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 .