html - 如何垂直对齐水平 ul 内的 img

Question

我的网站上有一个导航工作正常，但是，我们决定将 Logo 放在它的中间，现在我不能垂直对齐它，我尝试使用 line-height 但是它没有成功。

我把代码放在代码片段中，有人能帮帮我吗？

nav > ul > li > a > img {
  width: 60px;
  }

nav > ul {
  list-style: none;
  }

nav > ul > li {
  display: inline-block;
  }

nav > ul > li > a {
  text-decoration: none;
  color: black;
  }

<nav>
  <ul>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Shop</a></li>
  </ul>
</nav>

Answer 1

inline-block 默认为 vertical-align:baseline 所以设置为 middle,

与 img 的规则相同，所以如果您不想应用到 li，您可以应用到 img

nav > ul > li > a > img {
  width: 60px;
  /*vertical-align:middle - this would work here by itself too */
}
nav > ul {
  list-style: none;
}
nav > ul > li {
  display: inline-block;
  vertical-align: middle
}
nav > ul > li > a {
  text-decoration: none;
  color: black;
}

<nav>
  <ul>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li>
      <a href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo" />
      </a>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Shop</a>
    </li>
  </ul>
</nav>