css - 如何在导航中定位文本 "div."

Question

好的。感谢您给我宝贵的时间来查看这个问题。

基本上，我有一个“div”，我在屏幕顶部使用它作为我的导航栏。这是一个简单的导航栏，只有一个 80% 宽的“div”，带有一些在悬停时会改变颜色的文本。

我遇到的问题是；文本自动从“div”的顶部开始，我想将其居中。我尝试过边距、填充、 float 、“div”内的“div”等。

我将在此处发布导航栏的代码，如果您碰巧知道如何修复它，可以告诉我吗？

谢谢

HTML 代码:

<div class="header">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Repairs</a></li>
                <li><a href="#">Tune up/ Viruses</a></li>
                <li><a href="#">System Builds</a></li>
                <li><a href="#">Cables</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Find us</a></li>
                <li><a href="#">Links</a></li>
               <!-- <li><a href="/"><img src="facebook.png"></a></li>   -->
            </ul>
    </div>

CSS 代码:

.header ul { margin:0px;}
        div.header
        {
            width: 80%;
            height: 40px;
            margin-top: none;
            margin-bottom: none;
            margin-left: auto;
            margin-right: auto;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: none;
            background-color:  #575757;
        }
        li
        {
            display: inline;
            font-family: 'open sans,' arial;
            padding-right: 10px;
            padding-top: 10px;
            margin-left: 10px;
            font-size: 20px;
        }
        li a 
        {
            text-decoration: none;
            color: white;
        }
        li a:hover
        {
            color: #00ccff;
        }

Answer 1

您可以使用很多东西来使元素垂直居中。

对于一行元素(例如只有一行文本的元素)来说最好的是 line-height

将 line-height 设置为其父元素的高度:

li { line-height: 40px; }