Question

我可以将我的UL集中在一个div中。但我想让我的名单成为现实 vertical-align:middle。但这个词仍然没有移到中间。

我的css代码

.topnav{
    width:100%;
    height:50px;
    background:grey;
    display:inline-block;
}
.topnav ul{
    list-style-type:none;
    margin:0 auto;
    width:1000px;
    border:black solid 1px;
    height:50px;
}
.topnav ul li{
    border:black solid 1px;
    text-align:center;
    display:block;
    width:180px;
    float:left;
    height:50px;
}

我的HTML代码

<div class="topnav">
    <ul>
        <li>
            <a href="#">A</a>
        </li>
        <li>
            <a href="#">B</a>
        </li>
        <li>
            <a href="#">C</a>
        </li>
    </ul>
</div>

Answer 1

所有新编辑都是挖掘。

以下完整代码。

JS Fiddle Kiddle Middle Exampiddle

<强> CSS：

.wrapper {
    width: 100%;
    height: 50px;
    background: green;
    display: table;
}
.topnav {
    width:1000px;
    height:50px;
    background:red;
    display:table;
    margin: 0 auto;
}
.topnav ul {
    list-style-type:none;
    margin:0 auto;
    border:black solid 1px;
    height:50px;
    display:table-row;
}
.topnav ul li {
    border:black solid 1px;
    width:180px;
    height:50px;
    text-align:center;
    vertical-align: middle;
    display:table-cell;
    clear: none;
}
a {
    color: yellow;
}

<强> HTML

<div class="wrapper">
    <div class="topnav">
        <ul>
            <li><a href="#">A</a>

            </li>
            <li><a href="#">B</a>

            </li>
            <li><a href="#">C</a>

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

这里的主要变化是添加了一个包装器div，以允许内部div的居中。

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

        .wrapper {
            width: 45%;
            margin: 0 auto;
        }
        .topnav{
            width:100%;
            height:50px;
            background:grey;
        }
        .topnav ul{
            list-style-type:none;
            border:black solid 1px;
            height:50px;
            margin: 0;
            padding: 0;

        }
        .topnav ul li{
            border:black solid 1px;
            text-align:center;
            vertical-align: middle;
            display: inline-block;
            width: 180px;
            height:50px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div class="topnav">
    <div class="wrapper">
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </div>
</div>
</body>
</html>

这不是确切的解决方案，但这样做会有所帮助调整.wrapper和.topnav ul li中的宽度以添加更多菜单项并将它们居中如果这不起作用，那么你可以使用定位来定位ul。
希望这会有所帮助。

使ul内的列表垂直居中

2 个答案:

所有新编辑都是挖掘。

JS Fiddle Kiddle Middle Exampiddle