元素中文本垂直居中
元素中文本垂直居中
提问于 2018-05-30 07:55:30
我目前正在尝试垂直居中的导航菜单锚定标签与CSS的文本。我尝试了多个CSS属性，比如高度、顶部和固定位置以及显示块，但都没有用。
.mainav {
position: fixed;
top: 0;
z-index: 3;
width: 100%;
}
.mainav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffffff;
}
.mainav li {
float: left;
border-right: 1px solid #bbb;
}
.mainav li:last-child {
border-right: none;
}
.mainav li a {
height:35px;
top: 20px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<div class="mainav">
<ul>
<li><a href="/"><img src="" alt="Project Club Logo"></a></li>
<li><a href="/en/about">About</a></li>
<li><a href="/en/contact">Contact Us</a></li>
<li><a href="/en/pricing">Pricing</a></li>
<li><a href="/en/support">Support</a></li>
<li><a href="/en/login">Login</a></li>
<li><a href="/en/signup">Signup</a></li>
</ul>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-30 08:03:34
如果你想要实现的是垂直对齐文本，你可以这样做：
仅当它是一行时才有效：
.mainav li a {
height:35px;
top: 20px;
display: block;
color: black;
text-align: center;
padding: 0 16px;
text-decoration: none;
line-height: 35px;
}将line-height属性设置为相同的高度并删除填充(注意:您应该保留padding和left的-or margin-以便留出一些空间)。
.mainav {
position: fixed;
top: 0;
z-index: 3;
width: 100%;
}
.mainav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffffff;
}
.mainav li {
float: left;
border-right: 1px solid #bbb;
}
.mainav li:last-child {
border-right: none;
}
.mainav li a {
height:35px;
top: 20px;
display: block;
color: black;
text-align: center;
padding: 0 16px;
text-decoration: none;
line-height: 35px;
}<div class="mainav">
<ul>
<li><a href="/"><img src="https://4424club.xyz.412quack.com/assets/images/logo.png" alt="Project Club Logo"></a></li>
<li><a href="/en/about">About</a></li>
<li><a href="/en/contact">Contact Us</a></li>
<li><a href="/en/pricing">Pricing</a></li>
<li><a href="/en/support">Support</a></li>
<li><a href="/en/login">Login</a></li>
<li><a href="/en/signup">Signup</a></li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50594551
复制相关文章
相似问题