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

Question

我的网站上的导航工作正常，但是，我们决定将徽标放在其中间，现在我无法垂直对齐它，我尝试使用line-height但它没有制作技巧。

我把代码放在代码段中，有人可以帮我一把吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

使用vertical-align属性垂直对齐图像。

您想要的值很可能是middle。

nav > ul > li > a > img {
  width: 60px;
  vertical-align:middle;
  }

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>