Comment centrer du texte et des images dans du code HTML ?-tutoriel HTML-php.cn

Comment centrer du texte et des images dans du code HTML ?

黄舟

Libérer： 2017-05-26 15:40:11

original

11734 Les gens l'ont consulté

Code HTML, comment centrer le texte/l'image ? C'est une question soulevée par Leier front-end dans les questions et réponses sur la programmation de W3Cschool. Le donateur internaute Tong Xifu a donné une réponse détaillée.

Centrage du texte HTML et code de méthode de centrage d'image HTML, en réalisant le centrage du texte et le centrage d'image en HTML Il existe trois méthodes pour réaliser le centrage du contenu du texte et de l'image en HTML, dont deux sont implémentées à l'aide des styles CSS. celui d'origine est toujours utilisé. Ajoutez "align="center"" (center) à la balise html pour y parvenir.

1. Ajoutez un style de centrage CSS au corps

Nous définissons directement le style CSS sur le corps : text-align:center

1. 🎜>

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      body{text-align:center} 
    </style> 
  </head> 
  <body> 
    W3Cschool会被居中 
  </body>
</html>

Copier après la connexion

2. Exemples de captures d'écran centrées

Comment centrer du texte et des images dans du code HTML ?

Réglez le corps au centre pour obtenir des captures d'écran centrées sur le texte ou l'image

2. Ajoutez un style de centrage CSS à l'objet extérieur du texte

Tout d'abord, nous nommons le sélecteur CSS ".w3cschool" et ajoutons un style de centrage au sélecteur. Notre exemple montre deux objets DIV, un pour le texte et un pour les images.

1. Le code CSS correspondant est le suivant :

.w3cschool{text-align:center}

Copier après la connexion

2. Le code HTML+DIV+CSS complet est le suivant :

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      .w3cschool{text-align:center} 
    </style> 
  </head> 
  <body> 
    <div class="w3cschool">W3Cschool会被居中</div> 
    <div class="w3cschool">
      ![](http://upload-images.jianshu.io/upload_images/2642238-eba477a8a75edf90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)    </div> 
  </body>
</html>

Copier après la connexion

3. CSS implémente des images dans les objets et captures d'écran de l'effet de centrage du texte

Comment centrer du texte et des images dans du code HTML ?

Réalisation du centrage du texte html - exemple de centrage d'image html

Réalisation du centrage du texte html - centrage d'image html exemples de captures d'écran

3. Ajoutez align="center"

à l'objet texte externe Cette méthode était une méthode courante dans le passé. Utilisez align="center" directement dans la balise html. Réaliser le contenu de l'image ou du texte dans l'objet. Notre exemple montre le centrage dans les tableaux HTML et le centrage du contenu dans les balises HTML générales.

1. Code source HTML complet :

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>html align居中-W3Cschool</title> 
  </head> 
  <body> 
    <div align="center">W3Cschool会居中的</div> 
    <table width="100%"> 
      <tr> 
        <td align="center">表格中居中</td> 
      </tr> 
    </table> 
  </body>
</html>

Copier après la connexion

2. Capture d'écran de l'exemple d'effet

Comment centrer du texte et des images dans du code HTML ?

Capture d'écran du texte HTML centré

🎜>

Centrez le texte html, et centrez le texte dans le tableau html pour réaliser des captures d'écran
Utilisez l'attribut align directement dans la balise pour faciliter la pratique de l'utilisation du code de centrage "align="center"" dans Balises HTML ordinaires et balises de tableau HTML pour réaliser le contenu dans l'objet Centré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!