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>

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

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

我是否需要使用填充或边距标签？或完全不同的东西？

Answer 1

您的UL元素具有由bootstrap生成的附加margin-bottom属性。定位您的UL并将边距重置为0.

.nav ul{margin:0;}

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

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

Working example

Answer 2

使用vertical-align:middle。

.nav a {
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
    vertical-align:middle;
     display: inline-block;
}

添加重置

.nav ul{margin:0;}

Answer 3

它垂直居中但没有填充。您可以通过向.nav

添加填充来添加空间

.nav {
    background-color: #7f7f7f;
    padding: 10px 0;
}

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

3 个答案: