html - CSS 对齐 Logo 与文本高度相同

Question

如何将 Logo 和旁边的文本链接对齐到同一高度？这是用 display: inline-block; 完成的吗？

a {
  text-decoration: none;
  color: blue;
}

<nav>
  
  <a href="google.be"><img alt="logo" src="https://vignette.wikia.nocookie.net/simpsons/images/5/51/Wikimedia_logo.png/revision/latest/scale-to-width-down/50?cb=20100313090805"> wikipedia</a>
</nav>

Answer 1

您可以使用 flexbox，如另一个答案中所述。您还可以使用 vertical-align 属性

a {
  text-decoration: none;
  color: blue;
}

img {
  vertical-align: middle;
}

<nav>

  <a href="google.be"><img alt="logo" src="https://vignette.wikia.nocookie.net/simpsons/images/5/51/Wikimedia_logo.png/revision/latest/scale-to-width-down/50?cb=20100313090805"> wikipedia</a>
</nav>