Comment centrer une image en HTML

PDF download Télécharger l'article
Coécrit par l'équipe de wikiHow

PDF download Télécharger l'article

Quand on code une page web, il est important de savoir comment faire pour aligner des images. Malheureusement, le code évolue, certaines balises HTML deviennent obsolètes et ne sont donc plus reconnues par tous les navigateurs. Essayez les méthodes ci-dessous pour centrer une image en HTML. Si ça ne fonctionne pas, vous pouvez coder en feuilles de style en cascade ( Cascading Style Sheets ou CSS).

Méthode 1
Méthode 1 sur 2:

Aligner dans du texte

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dans du code HTML , vous pouvez centrer du texte, mais vous devez aligner les images avec le terme middle . Une image n'est pas un élément de ligne et elle est donc lue dans le code en rapport avec d'autres éléments.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Utilisez une balise paragraphe pour indiquer qu'une nouvelle ligne de texte commence. Ouvrez votre balise avec <p> puis saisissez votre texte.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    gif”. Puis ajoutez la description de cette dernière en saisissant alt=”votre description” .
    • La section src indique à la page web l'URL de l'image.
    • La section alt en indique le nom à la page web.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tapez align=”middle”> C'est la fin de votre balise  [1] .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puis fermez la balise avec </p>. Par exemple, votre balise complète pourrait ressembler à cela :
    <p>Nous apprenons le HTML. <img src=”ImageChienDansant.gif” alt=”Chien dansant” align=”middle”> Notre exemple est terminé. </p>     .
    Publicité
Méthode 2
Méthode 2 sur 2:

Aligner avec une balise center

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vous pouvez inclure l'image dans cet élément centré. Toutefois, faire cela créera des espaces supplémentaires autour de votre élément.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Commencez par centrer l'élément. Saisissez <center> .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tapez <img src=”ImageChienDansant.gif” alt=”Chien dansant” .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tapez donc height=”200”width=”200”> ( height étant la hauteur et width la largeur) ou la taille de votre choix. C'est la fin de votre balise.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Par exemple, votre balise complète pourrait ressembler à cela :
    <center><img src=”ImageChienDansant.gif” alt=”Chien dansant” height=”200” width=”200”></center>     [2] .
    Publicité

Avertissements

  • Il convient de savoir que les balises align et center peuvent devenir obsolètes. Cela signifie qu'elles ne seront plus utilisées à l'avenir. S'il n'y a pas de date exacte à laquelle elles cesseront d'être utilisées, les navigateurs finiront tous par ne plus les reconnaitre du tout et le code devra donc être mis à jour en CSS ou HTML5.
Publicité

wikiHows en relation

Comment
définir la largeur et hauteur d’une image en HTML
Comment
devenir un hacker
Comment
créer une pluie de code façon Matrix dans votre invite de commande.
Comment
mettre en forme du texte en code sur Discord
Comment
définir une image en fond de page en HTML
Comment
insérer des espaces dans un code HTML
Comment
mettre une couleur de fond de page en HTML
Comment
souligner du texte en HTML
Comment
voir le code source
Comment
créer sa première page Web en langage HTML
Comment
commencer à apprendre la programmation informatique
Comment
centrer un texte en HTML
Publicité

Références

  1. ↑ https://initiativedeveloppeur.fr/aligner-horizontalement-image-texte/
  2. ↑ https://initiativedeveloppeur.fr/aligner-horizontalement-image-texte/

À propos de ce wikiHow

Autres langues 
Cette page a été consultée 38 477 fois.

Cet article vous a-t-il été utile ?

Publicité