communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > Questions et réponses frontales > Comment centrer les images en HTML

Comment centrer les images en HTML

王林
Libérer： 2023-05-16 10:37:08
original
28917 Les gens l'ont consulté

HTML (Hypertext Markup Language) est l'un des langages de base pour la création de pages Web. Dans la conception d’interfaces Web, les images sont souvent utilisées, alors comment centrer les images en HTML ?

Voici 3 méthodes, implémentées respectivement à l'aide de CSS, de tableaux HTML et de balises HTML5.

Méthode 1 : utilisez CSS pour centrer l'image

Vous pouvez utiliser la propriété margin de CSS pour centrer l'image verticalement et horizontalement.

Étapes :

  1. Insérez une image en HTML : 
<img src="图片路径" alt="图片描述">
Copier après la connexion
  1. Définissez le style de l'élément img dans le fichier CSS
img {
  display: block;
  margin: 0 auto;
}
Copier après la connexion

Explication :

  • display: block; élément, Permet de le centrer horizontalement.
  • margin : 0 auto ; est utilisé pour définir les marges de l'image. Si les marges gauche et droite sont définies sur auto, l'image sera centrée horizontalement dans son conteneur.

Méthode 2 : utiliser un tableau HTML pour centrer l'image

Vous pouvez utiliser l'élément de tableau HTML et l'attribut align pour obtenir un centrage vertical et horizontal de l'image.

Étapes :

  1. Créer un tableau en HTML :

  

    
      <img src="图片路径" alt="图片描述">
Copier après la connexion
  1. L'attribut align du tableau est défini sur "center":

  

    
      <img src="图片路径" alt="图片描述">
Copier après la connexion

Explication : L'attribut align dans l'élément