Question

这就是我想要完成的事情。我有一个未加工的列表作为水平菜单。 <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，但这对我也无济于事。

我创建了single line JSFiddle和multi line JSFiddle。

Answer 1

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

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

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

Answer 2

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

Answer 3

如果您可以使用包装元素，例如<nav>元素，并且您可以不使用IE 7及更早版本的支持，那么这可能对您有用：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;
}

垂直对齐多行li

3 个答案: