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>

來源

2017-10-20 Panic

的'直列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>

來源

2017-10-20 08:52:52 sol

謝謝，我已經在使用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>

來源

2017-10-20 08:51:10

-1

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

來源

2017-10-20 09:03:42 Deepa

只是簡單的圖像

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>

來源

2017-10-20 10:13:02

CSS對齊與文字高度相同的徽標

回答

相關問題