CSS 将徽标与文本高度对齐

Question

如何将徽标和旁边的文字 link 对齐到同一高度？这是用 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 并设置 align-items: center。

a {
  text-decoration: none;
  color: blue;
  display: flex;
  align-items: center;
}

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

Answer 2

您可以使用 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>

Answer 3

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

    img{
    position:absolute;
    }
    span{
    position:relative;
    top:16px;
    left:50px;
    }

    <!-- language: lang-html -->

        <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"> <span>wikipedia</span></a>
        </nav>

    <!-- end snippet -->

Answer 4

只需简单地在图像上添加 vertical-align:middle;

img{
vertical-align:middle;
margin-right:5px;
}

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

CSS 将徽标与文本高度对齐

CSS Align logo same height as text

html

css

text-align

css-position

hyperlink