Wie kann ich das Logo und den Textlink daneben auf der gleichen Höhe ausrichten? Ist das etwas mit display: inline-block; getan?CSS Align-Logo in gleicher Höhe wie Text
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>Sie Flexbox verwenden können, wie in einer anderen Antwort zur Kenntnis genommen. Sie können auch die vertical-align Eigenschaft
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>Danke, ich arbeite schon mit CSS Grids, also behalte ich das lieber, anstatt es mit ein bisschen Flexbox zu mischen – Panic
können Sie Flexbox und align-items: center Set verwenden.
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 -->
nur einfach hinzufügen vertical-align:middle; auf das Bild
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>
Eine Demonstration eines 'Inline-block' verwenden Lösung wäre: 'nav * { Anzeige: Inline-Block; vertikal ausgerichtet: Mitte; } '- aber ich würde vorschlagen, eine bessere HTML-Struktur anzuwenden, so dass der globale Selektor' * 'wäre nicht notwendig, um das gleiche Ergebnis zu erzielen. – UncaughtTypeError