如何在导航栏中垂直居中文本？

Question

如何在导航栏中垂直居中文本？

HTML：

<body>
    <div class = "container">
        <div class = "nav">
            <ul class = "pull-left">
                <li><a class = "brand" href = "/">New York Guide</a></li>
            </ul>

            <ul class = "pull-right">
                <li><a href = "#">Sign Up</a></li>
                <li><a href = "#">Log In</a></li>
                <li><a href = "#">Help</a></li>
            </ul>       
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS：

.nav li {
    display: inline;
}

.nav a {
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav {
    background-color: #7f7f7f;
}

Run Code Online (Sandbox Code Playgroud)

目前，我的导航栏的文本靠近灰色栏的顶部。有没有办法将它垂直居中？

我需要使用填充或边距标签吗？或者完全是别的什么？

Answer 1

小智 5

您的 UL 元素具有由引导程序生成的附加边距底部属性。定位您的 UL 并将边距重置为 0。

.nav ul{margin:0;}

Run Code Online (Sandbox Code Playgroud)

此外，修复您的链接的填充相等并使它们显示为内联块：

.nav a {padding: 10px 10px; display:inline-block;}

Run Code Online (Sandbox Code Playgroud)

工作示例

归档时间：	11 年，1 月前
查看次数：	15522 次
最近记录：	11 年，1 月前