gpt4 book ai didi

html - 添加填充会导致垂直对齐问题

转载 作者:行者123 更新时间:2023-11-28 16:16:53 24 4
gpt4 key购买 nike

我有一个标题,左侧包含两个 href,右侧包含一个导航栏。我在将所有内容垂直居中对齐时遇到问题。我已经解决了关于垂直对齐问题的数百万个问题,但没有解决我的问题。

如果我向菜单标签添加填充,则 href 不再按中间垂直对齐。如果菜单的填充为 0,则一切都对齐良好。导航栏需要高度和宽度吗?

.menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
display: block;
float: right;
margin-right: 100px;
border: red 3px solid;
padding: 10px 0;
vertical-align: middle;
}

#header nav{
display:inline;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;

}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
a img{
vertical-align:middle;
}
a, a:visited{
color: white;
}
<body>
<header id="header">
<a href="#top">Test</a>
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
<nav id="navbar">
<label class="menu">Menu</label>
</nav>
</header>

</body>
</html>

最佳答案

edited fiddle 这应该对你有用 https://jsfiddle.net/5f3pbg8b/13/

注意:您不能对 float 元素使用 vertical-align: middle;,这是因为 float 元素与顶部对齐,您可以阅读更多相关信息这里https://www.w3.org/TR/CSS21/visuren.html#floats

.menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
position: absolute;/* new */
right: 0;/* new */
margin-right: 100px;
border: red 3px solid;
padding: 10px 0;
margin-top: -10px;/* new */
}

关于html - 添加填充会导致垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37471431/

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