Question

<!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>中，然后尝试将文本放在不同的类中，而不是试图使其垂直对齐，但是都没有用。

Answer 1

不太确定你想要什么。 vertical-align用于块元素中的内联元素（或文本）。如果你想要一个块元素（如nav标签）居中，给它一个左右边距，其值为auto。如果你想要你的li元素并排设置一个显示属性与inline-block

的值

nav{
    margin:0 auto;
    /*Update: you must also give the nav a width for this to work*/
    width:450px;
}
nav li{
    display:inline-block;
}

更新：看到你的评论后，我认为这就是你想要的

li {
    list-style:none;
}
li a {
    display: block; /*the links will now be displayed as block elements with a default width of 100% */
    text-align:center;
}

Answer 2

像这样修改你的代码

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

这应该有效

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

2 个答案: