本文介绍了css - verticaly align horizo​​ntal 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 horizo​​ntal li的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 12:24