gpt4 book ai didi

html - 如何在我的导航栏中垂直居中文本?

转载 作者:太空狗 更新时间:2023-10-29 12:33:59 31 4
gpt4 key购买 nike

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

目前,我的导航栏的文本靠近灰色栏的顶部。有没有办法让它在栏中垂直居中?

我需要使用 padding 或 margin 标签吗?还是完全不同?

最佳答案

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

.nav ul{margin:0;}

此外,将链接的填充固定为相等,并使它们显示为内联 block :

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

Working example

关于html - 如何在我的导航栏中垂直居中文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24842290/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com