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