Dans ce tutoriel, nous allons voir comment centrer des images avec HTML et CSS. Ce n'est pas compliqué du tout et nous en aurons souvent besoin pour nos pages web. Nous allons voir quelques options, une que nous utilisons uniquement HTML, une autre via CSS et enfin en utilisant Bootstrap.
HTML et CSS sont deux langages de script Web de premier plan dans le monde de la création de pages Web et d'applications. Les deux langues travaillent ensemble sur cette tâche. Alors que HTML donne une structure aux pages web, CSS s'occupe du style et de la partie visuelle ou auditive. HTML fournit des balises qui enveloppent les différents éléments d'une page et de cette manière, avec des attributs, nous créerons le squelette de notre site Web.
Différences entre HTML et CSSPour résumer, nous pouvons voir les différences entre HTML et CSS comme suit :
- HTML est plus facile à apprendre et à mettre en œuvre
- HTML Disponible en plusieurs langues
- HTML est léger et efficace
- HTML a une sécurité limitée
- HTML est un peu lent.
- CSS a une plus grande bibliothèque d'attributs et de styles que CSS
- CSS améliore le temps de chargement des pages.
- CSS a une grande compatibilité et une maintenance facile.
- CSS pose des problèmes de performances
- CSS n'a pas de sécurité intégrée
Il est recommandé aujourd'hui d'effectuer les étapes directement avec CSS, mais si vous êtes plutôt HTML, vous pouvez également avoir les options suivantes.
1. Comment centrer l'image sur une page Web en utilisant uniquement HTML
Bien que ces options soient conçues pour centrer l'image avec HTML, nous verrons deux façons de le faire facilement.
Centrer l'image avec HTML et balise centraleDans cette option simple, il suffit d'envelopper l'image avec les étiquettes centrales
- La partie « src » est utilisée pour indiquer l'adresse de chemin de l'image.
- La partie alt donne des informations à la page Web sur le nom de l'image.
De plus, il faut attribuer une hauteur et une largeur de l'image comme ceci :
hauteur = « 250 » »
Centrer l'image avec HTML et milieuMais par rapport aux images, cette notion de centre que nous avons vue diffère et il vaut mieux utiliser un alignement médian, donc le code reste le suivant :
Si nous ajoutons également du texte, nous aurions ce code :
Cet exemple sera de centrer une image avec du texte en HTML.
Aligner l'image sur HTML avec l'attribut alignSi nous voulons aligner une image horizontalement, nous pouvons le faire de la même manière que nous le faisons avec du texte, c'est-à-dire utiliser l'attribut align dans les étiquettes
ou alors. Nous allons créer le code où l'attribut apparaît avec la balise image. L'étiquette est l'une de celles qui accepte l'attribut align mais l'utilisation est différente.
Mais comme on dit, l'étiquette
Ici, nous mettrons le texte qui remplirait toute la partie droite et envelopperait l'image que nous avons placée. Nous continuons à remplir le texte solvetic solvetic solvetic
Nous ferons de même pour aligner le texte et l'image à droite sur la gauche, mais en remplaçant « gauche » par « droite ».
Ce n'est pas recommandé, car les aspects de placement et de style doivent être laissés à CSS et non utilisés directement en HTML. De cette façon, nous aurons un code plus facile à maintenir et à modifier, mais si à un moment donné vous en avez besoin pour un petit test rapide, cela vaut la peine de le savoir.
2. Comment centrer une image sur une page web avec CSS
Ici, nous aurons du code HTML et du code CSS. Commençons par regarder le HTML.
Nous avons mis une classe à l'image, appelée centered, et cela nous aidera à la styler plus tard dans le CSS. Voici le code pour centrer l'image.
.center {marge : 10px auto; bloc de visualisation; } Nous pouvons également utiliser le code suivant pour aligner une image en utilisant CSS pour notre page Web :
.center {marge-gauche : auto; marge-droite : auto ; }Si cela ne fonctionne pas pour vous dans un navigateur parce que la méthode de centrage du texte est utilisée, nous devons indiquer au navigateur que l'image est un élément de niveau bloc. De cette façon, nous pouvons le centrer comme s'il s'agissait d'un autre bloc. Nous utiliserons ce code :
On fait apparaître l'élément sous forme de bloc, et on lui donne une marge automatique (il suffit que la marge soit automatique sur les côtés, en haut et en bas vous pouvez mettre ce que vous voulez). Gardez à l'esprit que si l'image occupe toute la largeur, elle ne sera pas centrée.
img.center {affichage : bloc; marge-gauche : auto ; marge-droite : auto ; }
3. Comment centrer une image sur une page Web à l'aide de Bootstrap
Avec ce framework populaire, tout est plus simple, il suffit de mettre la classe du bloc central dans l'image.
Vous devrez télécharger Bootstrap et le lier ou mettre votre CDN dans notre HTML, pour cela je laisse votre lien ci-dessous :
Nous pouvons voir le résultat de l'application de ces codes avec une image ci-dessous :
De cette façon, nous pouvons à la fois centrer nos images en HTML et en utilisant CSS et ainsi réaliser des travaux Web esthétiquement plus réussis.
