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

Question

我有一个菜单，其中一些链接是一行，有些是 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>

Answer 1

移动：

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

.. 进入A-tag CSS 声明，退出LI.

通常，您会发现，如果将所有样式（除display: position:and之外float:）放在 A 标记而不是列表上，总体上您的头痛就会减少。

请参阅我的教程，我喜欢列表。

Answer 2

您可以使标签的行高与您的标签a的高度相同li

Answer 3

<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;
}