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 - 标记CSS声明，并从LI开始。

一般情况下，如果您将所有样式（display: position:和float:除外）放在A-tag而不是列表中，您会发现总体上更少的头痛。

请参阅我的教程I Love Lists。

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

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

3 个答案: