[英]css - verticaly align horizontal li
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. 我试图将a:元素垂直集中在wordpress导航菜单中的li中,但是我没有成功实现这一点。
The code I'm using is: CSS 我使用的代码是: 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 的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. 可能真的很简单,但是我无法弄清楚if的底线。
Thanks in advance, J 预先感谢,J
So going by your CSS I'm guessing that .site-menu .menu ul li a
is the element that you wish to center? 因此,通过您的CSS我猜想
.site-menu .menu ul li a
是您希望居中的元素? Anyway, in general you can center the children of any element this way: 无论如何,通常您可以通过以下方式使任何元素的子元素居中:
display: flex;
align-items: center; /* To center vertically */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.