CSS在中间垂直对齐LI

Joh*_*ore 3 html css html-lists

我有以下HTML,我需要LI元素垂直显示在21像素高UL区域的中间.这是我的HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        .MenuBar
        {
            padding: 0px;
            border: 1px solid #036;
            height: 21px;
            font-size: 8pt;
        }
        .MenuBar li
        {
            display: inline;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="MenuBar">
        <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如何改变上述HTML来实现这种效果?

Rob*_*sto 6

我假设您正在尝试制作水平而不是垂直列表,因为您将LI元素显示类型设置为"内联".试试这个:

<style type="text/css">
    .MenuBar
    {
        padding: 0px;
        border: 1px solid #036;
        height: 21px;
        font-size: 8pt;
    }
    .MenuBar li
    {
        display: inline;
        line-height: 21px;
        padding-left: 20px;
    }
</style>
Run Code Online (Sandbox Code Playgroud)