水平菜单中文本的垂直对齐

我有一个菜单，其中一些链接是一行，一些是2. 我找不到垂直对齐文本的方式，它粘在顶端。任何想法如何解决我的代码将是伟大的。水平菜单中文本的垂直对齐

的CSS：

ul { 
    margin: 0; 
    padding: 0; 

} 
ul.menu { 
    height: 100px; 
    border-left: 1px solid rgba(0,0,0,0.3); 
    border-right: 1px solid rgba(255,255,255,0.3); 
    float:left; 
    display: table-row; 
} 

ul.menu li { 
    list-style: none; 
    float:left; 
    height: 99px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    background: rgba(191,232,108,1); 

    } 

ul li a { 
    display: block; 
    padding: 0 20px; 
    border-left: 1px solid rgba(255,255,255,0.1); 
    border-right: 1px solid rgba(0,0,0,0.1); 
    text-align: center; 
    height:99px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #371C1C; 
    background : rgb(168,168,168); 

    } 

ul li a:hover { 
    background: transparent none; 
    color: #fff; 
} 

ul li.active a{ 
    color: #0f0; 
    background:rgba(31,169,244,1); 
} 
span { 
    display: table-cell; 
    vertical-align: middle; 
    }

的HTML，在这里我想一些方法来打破行：

<div class="wrapper"> 
<div class="container"> 
<ul class="menu"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contacts</a></li> 
<li><a href="#"><span>bla bla<br/> blabla bla</span></a></li> 
<li><a href="#">Twitter bla<br/> blabla bla</a></li> 
<li><a href="#">Twitter bla blabla bla</a></li> 

</ul> 
</div> 
</div>

来源

2013-02-11 Naomi

移动：

display: table-cell; 
vertical-align: middle;

..into到A - 标记CSS声明，并且出LI。

一般而言，如果将所有样式（除display:position:和float:以外）放在A标签上而不是列表中，则总体上会少一些麻烦。

请参阅我的教程，I Love Lists。

来源

2013-02-11 20:37:53

伟大的答案感谢相同的高度，完美的作品。也喜欢这个教程。你改变了我的生活。 – Naomi 2013-02-12 16:22:04

英雄职位。多谢兄弟。 – SC1988 2015-07-21 03:49:51

谢谢你让我回到这个。这恰好是我正在从事的工作的及时解决方案。 – 2015-07-21 17:49:46

你可以让你的a标签的行高你li的

来源

2013-02-11 20:45:07 Luke

根据我的经验，此解决方案对于2行或更多的菜单项不起作用。 – Naomi 2013-02-12 16:25:13

这也许是真的，我只是不喜欢在表格外使用表格样式。没有错，它只是打破惯例。 – Luke 2013-02-12 17:03:56

-2

<div id="midalign"> 
    <ul> 
     <li><a>Home</a></li> 
     <li><a>About Us a very long link </a></li> 
     <li><a>Forum</a></li> 
    </ul> 
</div> 

CSS code: 
#midalign ul { 
    display:table-cell; 
    vertical-align:middle; 
    list-style:none; 
    height:100px; 
} 

#midalign li { 
    float:left; 
    margin-right:30px; 
    width:100px; 
}

来源

2013-03-27 01:48:44 Jennift

水平菜单中文本的垂直对齐

回答

相关问题