Comment centrer une image en HTML

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

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

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

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
devenir un hacker
Comment
créer une pluie de code façon Matrix dans votre invite de commande.
Comment
créer un virus
Comment
mettre en forme du texte en code sur Discord
Comment
insérer des espaces dans un code HTML
Comment
définir la largeur et hauteur d’une image en HTML
Comment
commencer à apprendre la programmation informatique
Comment
créer un fichier exécutable (.exe)
Comment
planter son ordinateur avec un fichier batch
Comment
hacker un système informatique
Comment
exécuter un fichier batch sous Windows
Comment
exécuter un fichier HTML dans Visual Studio Code
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 35 701 fois.

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

Publicité