0

这就是我想要完成的。我有一个无序列表作为水平菜单。<li>应该在中间垂直对齐，如下所示：

_______________________________________
| |
| |
| [____] [____] [____] [____] |
| |
|_______________________________________|

到目前为止没有问题，使用vertical-align: middle和line-height. 挑战是我希望能够有两条线，并让它们在中间对齐，就像这样：

_______________________________________
| |
| [____] [____] [____] [____] |
| |
| [____] [____] [____] |
|_______________________________________|

到目前为止的代码： HTML 

<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
</ul>

CSS 

ul {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100px;
    background: lightblue;
    text-align: center;
    list-style: none;
    vertical-align: middle;
    line-height: 100px;
}
    ul li {
        display: inline;
    }
        ul li a {
            padding: 5px 15px;
            margin: 0 10px;
            background: lightgreen;
        }

我已经找到了 this和this，但这对我也没有帮助。

我创建了单行 JSFiddle和多行 JSFiddle。

4

3 回答 3

0

如果您可以使用包装器元素，比如说一个<nav>元素，并且 ypu 可以在没有 IE7 和更早版本的支持的情况下进行，也许这对您有用：http: //jsfiddle.net/LZfVY/1/

nav {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100px;
    background: lightblue;
    line-height: 100px;
    font-size:0;
    text-align: center;
}

ul {
    display:inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: lightblue;
    list-style: none;
    line-height: 2.2;
    font-size:16px;
}
ul li {
    display: inline;
}

ul li a {
    padding: 5px 15px;
    margin: 0 10px;
    background: lightgreen;
}
于 2013-08-06T19:03:27.717 回答
0

添加display:table-cell;到 ul 样式。然后根据需要调整线高，使双线间距适当。

于 2013-08-06T19:00:59.340 回答
0

我认为您需要做的就是将 UL 的高度设置为自动。

ul {
    margin: 0;
    padding: 0;
    width: 500px;
    height: auto;
    background: lightblue;
    text-align: center;
    list-style: none;
    vertical-align: middle;
    line-height: 100px;
}

看看JS Fiddle，看看它是否符合您的要求。

于 2013-08-06T18:13:16.993 回答