0

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

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

我遇到的问题是；文本自动从“div”的顶部开始，我想将它居中。我已经尝试过边距、填充、浮动、“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>

代码：

.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;
        }
4

1 回答 1

2

您可以使用一堆东西将元素垂直居中。

最好的一对一元素（例如，只有一行文本的元素）是line-height

将 设置line-height为等于其父项的高度：

li { line-height: 40px; }
于 2012-05-19T22:37:40.763 回答