css - 垂直对齐水平li答案

【问题标题】：css - verticaly align horizontal licss - 垂直对齐水平li
【发布时间】：2015-08-21 23:41:28
【问题描述】：

我试图在 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>

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

提前致谢， J

【问题讨论】：

PHP 对我们没有任何价值...需要实际输出的 HTML。
@Paulie_D 我刚刚粘贴了“HTML”代码，以便确认类选择器名称
如何在没有看到实际 HTML 和 CSS 输出的情况下检查对齐方式？

标签： html css wordpress

【解决方案1】：

所以按照您的 CSS，我猜 .site-menu .menu ul li a 是您希望居中的元素？无论如何，通常您可以通过这种方式将任何元素的子元素居中：

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

更多信息可以在here找到。

【讨论】：

感谢您的回复。我不知道 display: flex 语法。问题排序。谢谢
@joebegborg07 取决于您提供的浏览器支持，这可能不是一个可行的解决方案，see here。