Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

a {
  text-decoration: none;
  color: blue;
}

img {
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

Answer 3

只需在图片上添加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>

Answer 4

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

CSS将徽标与文本

4 个答案: