Question

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

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

我遇到的问题是;文本自动从“div”的顶部开始，我想将它居中。我已尝试过边距，填充，浮动，“div”中的“div”等等。

我会在这里发布导航栏的代码，如果你碰巧知道如何修复它，请告诉我吗？

由于

HTML CODE：

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

如何在导航“div”中定位文本。

1 个答案: