CSS 列表格式菜单 - 当图像在列表中时，菜单项下移

Question

我在导航栏内格式化 img 时遇到问题 - 在下面的代码片段中，导航项并排排列得很好，直到我在 .navitem li 中插入图像。然后出于某种原因我不明白下一个导航项目以某种方式向下移动。

谁能解释一下为什么？我知道我可能可以使用 flex 或 table 布局来使其工作，我只是想了解为什么它会这样显示。

我本以为，导航的高度和行高 = 80px，图像大小 = 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>

Answer 1

正如 Paulie_D 在他的评论中指出的那样，我将 vertical-align 放在父元素上而不是 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>

CSS 列表格式菜单 - 当图像在列表中时，菜单项下移

CSS List formatting menu - menu items shifted down, when image is in the list

css

html-lists