50){ $("heade-6ren">
个人中心
gpt4 book ai didi

html - 如何将导航栏 li 与垂直对齐对齐？

转载 作者：太空宇宙 更新时间：2023-11-03 18:12:48 26 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html lang="en">
<head>
<title>De Studiehoek</title>
<LINK HREF="style/main.css" REL="stylesheet" TYPE="text/css">
<script src="/Javascript/jquery-latest.js"></script>
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>50){
    $("header").removeClass("large").addClass("small");
} else{
    $("header").removeClass("small").addClass("large");
}
});
</script>

</head>
<body>
<header  class=“large”>
<nav id="navbar">
<ul>
    <li><a href="#">Welkom</a></li>
    <li><a href="#">Informatie</a></li>
    <li><a href="#">Begeleiding</a></li>
    <li><a href="#">Visie</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav> <!--navbar-->
</header>


<section id="welkom">

<p> test tekst </p>
<p> en nog meer tekst <p> 
</section>

</body>
</html>

body { 
background-color: #0d1416;
}


header,nav, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}

/*header*/
header {
background: #FFFFFF;
opacity: 0.9;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}

header.a { 
color: #969696;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
} 

header a.active{
color: #3d3d3d;
} 
header a.hover{ 
color: #FF00FF;
}

/* Sizes for the bigger menu */
header.large{
top: 0;
left: 0;
height: 120px; 
}

header.large ul{
float: right;
}

header.large li{ 
display: inline;
text-transform: uppercase;
letter-spacing: 2px;
padding-right: 10px;
text-decoration: none;
}

header.large a{ 
text-decoration: none;
}

/* Sizes for the smaller menu */
header.small{
top: 0;
left: 0;
height: 50px; 
}

header.small ul{ 
float: right;
}


header.small li{ 
display: inline;
float: left;
text-transform: uppercase;
letter-spacing: 2px;
padding-right: 10px;
text-decoration: none;
}

header.small a{ 
text-decoration: none;
}

/*section welkom*/
#welkom {
float:left;
height: 1500px;
width: 100%;
position: relative;
}

我正在做一个元素，但遇到了一个问题。我的导航栏大小不断变化，我想要 <li>至 vertical-align: middle;但我不知道如何让它工作。有人可以帮我吗？我试图通过将它放在 <li> 中来让它工作。我尝试将文本放在不同的类中，然后尝试使其垂直对齐，但都没有用。

最佳答案

像这样修改你的代码

header.large{
top: 0;
left: 0;
height: 120px;
margin: 0 auto;
display: table; //imporatnt use this on your header.small also
}

#navbar{
display:table-cell;
vertical-align: middle;
 }

这应该可行

关于html - 如何将导航栏 li 与垂直对齐对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23372237/

26 4 0
文章推荐： python - 使用 TextInput 中的用户输入 - Kivy
文章推荐： javascript - Ruby 和 JavaScript 的 MD5 值不同
文章推荐： c# - ExecuteNonQuery:连接属性尚未初始化
文章推荐： python 正则表达式搜索 findall 捕获组