CSS Aligner le logo sur la même hauteur que le texte

Comment puis-je aligner le logo et le lien de texte à côté de la même hauteur? Est-ce que quelque chose est fait avec display: inline-block;?CSS Aligner le logo sur la même hauteur que le texte

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>

Source

2017-10-20 Panic

Une démonstration d'une ligne '-block' solution serait: 'nav * { affichage: inline-block; alignement vertical: milieu; } '- mais je suggérerais d'appliquer une meilleure structure html pour que le sélecteur global' * 'ne soit pas nécessaire pour obtenir le même résultat. – UncaughtTypeError

Vous pouvez utiliser FlexBox, comme il est indiqué dans une autre réponse. Vous pouvez également utiliser la propriété 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>

Source

2017-10-20 08:52:52 sol

Merci, je travaille déjà avec CSS Grids donc je préfère garder ça au lieu de le mixer avec un peu de flexbox – Panic

Vous pouvez utiliser Flexbox et définir 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>

Source

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

Source

2017-10-20 09:03:42 Deepa

tout simple ajouter vertical-align:middle; sur l'image

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>

Source

2017-10-20 10:13:02

CSS Aligner le logo sur la même hauteur que le texte

Répondre

Questions connexes