<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
</body>
</html>
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
vertical-align: middle;
}
navr{
vertical-align: middle;
}
为什么垂直对齐属性不起作用？我希望内容垂直显示在导航条的中间，但它显示在导航栏的垂直顶部。我是一个尝试学习Web开发的初学者。第一个代码是html部分，而第二个代码是css样式表部分
CSS*{ }中的margin: 0vw;是导致问题的原因。如果您将margin: auto;添加到navl和navrCSS中，您将被设置。点击此处查看Fiddle
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
vertical-align: middle;
margin: auto;
}
navr{
vertical-align: middle;
margin: auto;
}
因为您使用的是flex容器，所以您应该将其上的元素对齐为：
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
align-items: center; /*align items in a flex container*/
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
/*vertical-align: middle;*/
}
/*navr{
vertical-align: middle;
}*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
</body>
</html>供进一步参考https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container