本文介绍了css - verticaly align horizontal li的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在wordpress导航菜单中在li中垂直集中一个a:元素,但是我没有成功。我使用的是:
CSS
.site- .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:最后一种类型{
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
解决方案
CSS我猜想 .site-menu .menu ul li a
是你想要集中的元素?无论如何,一般来说,你可以通过这种方式使任何元素的子元素居中:
display:flex;
align-items:center; / *垂直居中* /
可以找到更多信息。
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
解决方案
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.
这篇关于css - verticaly align horizontal li的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!