Bien que ce ne soit pas nécessairement difficile, centrer des images sur vos pages Web peut être plus compliqué que vous ne le pensez. La raison principale est que la balise est un élément en ligne, donc elle se comporte différemment des éléments de niveau bloc. Certaines approches utilisent le HTML, d’autres le CSS, et certaines sont considérées comme plus » propres » que d’autres en ce sens qu’elles ne sont pas dépréciées. Pour procéder, sélectionnez une méthode dans la liste ci-dessous et suivez les instructions.
- Utilisation de l’attribut de style.
- Conversion en élément de niveau bloc.
- Utilisation des balises centrales.
Utilisation de l’attribut de style
Pour le support en HTML5, vous devez utiliser un attribut de style avec la valeur text-align:center à l’intérieur d’un élément de niveau bloc; tel qu’un.
Exemple de code HTML
L’ajout d’un style en ligne comme indiqué ci-dessus ne devrait idéalement se faire qu’une seule fois dans un document. Si vous avez besoin de centrer plusieurs images, vous devriez utiliser la suggestion ci-dessous et créer une classe CSS pour réduire le code redondant et accélérer votre page Web.
Exemple de centre d’image utilisant le code ci-dessus
Conversion en un élément de niveau bloc
Une façon de centrer correctement les images est de définir l’élément comme un élément de niveau bloc. Pour ce faire, ajoutez une règle à l’en-tête de votre page (voir l’exemple suivant), ou un fichier CSS externe lié.
Exemple de code HTML
Avec ce code, vous pouvez appliquer la classe centerImage à une balise sans avoir à l’imbriquer dans un élément de niveau bloc. Cette méthode fonctionne pour plusieurs images.
Exemple de code d’image centrée
Utilisation des balises
Vous pouvez centrer une image en insérant la balise dans les balises. Cette action centre que, et seulement que, l’image sur la page Web. Il est à noter que cette méthode est obsolète en HTML5 et ne fonctionnera pas toujours dans tous les navigateurs à l’avenir. Nous vous recommandons d’utiliser cette méthode uniquement si aucune des autres suggestions mentionnées ci-dessus ne fonctionne là où vous essayez de centrer une image.