Question

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

我正在使用的代码是：的 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>

可能是非常简单的事情，但是我无法深入了解if。

提前致谢， Ĵ

Answer 1

所以通过你的CSS我猜测.site-menu .menu ul li a是你想要居中的元素吗？无论如何，一般来说，你可以通过这种方式将任何元素的孩子集中在一起：

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

可以找到更多信息here。

css - verticaly对齐水平li

1 个答案: