CSS对齐与文字高度相同的徽标

问题描述：

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

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>

的'直列block'的演示加vertical-align:middle;解决办法是：'nav * {display：inline-block; vertical-align：middle; } - 但我会建议应用一个更好的html结构，这样全局选择器'*'不需要达到相同的结果。 – UncaughtTypeError

答

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

谢谢，我已经在使用CSS网格，所以我更愿意保持这一点，而不是将它与一点点的flexbox混合 – Panic

答

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

答

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

答

只是简单的图像

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对齐与文字高度相同的徽标

相关推荐