我在导航栏内格式化图像时遇到了一个问题-在下面的代码片段中，导航项并排排列得很好，直到我在.navitem li中插入图像。然后，由于某些原因，我不明白下一个导航项会往下移。
谁能给我解释一下为什么?我知道我可能可以使用flex或表格布局使其工作，我只是想了解为什么它显示成这样。我本来希望，随着height &nav的line-height = 80px, image的size= 80px，那么所有的东西都会垂直居中对齐。
.nav {
width: 100vw;
height: 80px;
line-height:80px;
vertical-align: middle;
}
.navitem {
height: 80px;
display: inline-block;
width: auto;
margin-left: 2em;
padding: 0;
border: solid 1px;
border-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>CSS List Problem</title>
</head>
<body>
<nav class="nav">
<ul>
<li class="navitem"><img src="https://dummyimage.com/80x80/000/fff"/> </li>
<li class="navitem">Hello</li>
<li class="navitem">World</li>
</ul>
</nav>
<h1>Hello World!</h1>
</body>
</html>正如Paulie_D在他的评论中指出的那样，我把垂直对齐放在父元素上而不是li元素本身。嗯…是的…不是有人说没有愚蠢的问题吗;-)
.nav {
width: 100vw;
height: 80px;
line-height:80px;
}
.navitem {
height: 80px;
display: inline-block;
width: auto;
margin-left: 2em;
padding: 0;
border: solid 1px;
border-color: red;
vertical-align: middle;
}<!DOCTYPE html>
<html>
<head>
<title>CSS List Problem</title>
</head>
<body>
<nav class="nav">
<ul>
<li class="navitem"><img src="https://dummyimage.com/80x80/000/fff"/> </li>
<li class="navitem">Hello</li>
<li class="navitem">World</li>
</ul>
</nav>
<h1>Hello World!</h1>
</body>
</html>