Vous êtes ici : Neoxys » Création de site » Ressources » Aligner une image et du texte sur une même ligne

Aligner une image et du texte sur une même ligne


css

Une petite astuce toute bête mais bien efficace pour aligner une image et un texte sur la même hauteur : utiliser du CSS.
Voici le code html d’une image, suivi d’un texte :

<p><img src="nom_image.jpg" alt="" />Exemple de texte</p>

Pour aligner l’image et le texte verticalement, on utilise la propriété CSS vertical-align.

Elle s’utilise de la manière suivante en externalisant le CSS :

img {
    vertical-align:top;
}

Ou en appliquant directement un style sur l’image dans le code :

<p><img style="vertical-align: top;" src="nom_image.jpg" alt="" />
Exemple de texte</p>

Exemple d’alignement vertical d’une image et d’un texte :

Exemple de texte


A propos de l'auteur : Neoxys

Jérémie NEUBAUER travaille en tant que chef de projet SEO dans une agence de référencement depuis 2007. C'est en véritable passionné qu'il tient ce web blog et fait une veille quotidienne pour se tenir informé des évolutions et news de la sphère du référencement.

Contactez-moi

Réaction sur l'article (1 commentaire)

Laisser un commentaire >>

  1. Antoine dit :

    Sympa ta petite astuce. Perso j’utilise un ligne height sur le que je mets à 100% de ma hauteur, ça marche également

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>