recherche

Maison >interface Web >Questions et réponses frontales >affichage du centre des paramètres HTML

affichage du centre des paramètres HTML

WBOY
WBOYoriginal
2023-05-21 17:07:3727285parcourir

HTML est l'un des langages de balisage les plus couramment utilisés dans la conception Web, et l'affichage centré est également l'une des méthodes d'affichage les plus élémentaires dans la conception Web. Cet article explique comment utiliser HTML pour définir un affichage centré dans les pages Web.

1. Centrage horizontal

1.1 Utilisation de l'attribut d'alignement du texte

Vous pouvez utiliser l'attribut text-align pour centrer les éléments HTML horizontalement. Cet attribut peut être défini sur un élément parent pour centrer ses éléments enfants horizontalement.

Exemple de code : 

<!doctype html>
<html>
  <head>
    <style>
      .container {
        text-align: center;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

1.2 Utilisation de l'attribut margin

Vous pouvez également utiliser l'attribut margin pour obtenir un centrage horizontal. Notez que cette méthode ne fonctionne que pour les éléments de largeur fixe.

Exemple de code : 

<!doctype html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

2. Centrage vertical

2.1 Utiliser les attributs d'alignement du texte

Si vous devez obtenir un centrage vertical dans les éléments HTML, vous pouvez définir l'attribut display: table sur l'élément parent et définir l'affichage : sur l'élément enfant table-cell et vertical-align : propriétés du milieu.

Exemple de code : 

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: table;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
      .inner {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <div class="inner">
        <p>这是一段文字</p>
      </div>
    </div>
  </body>
</html>

2.2 Utilisation de l'attribut flex

Une autre façon d'obtenir un centrage vertical consiste à utiliser l'attribut flex. Définissez display: flex sur l'élément parent et définissez les propriétés align-items: center et justifier-content: center sur l'élément enfant pour obtenir un centrage vertical.

Exemple de code : 

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

Les deux méthodes peuvent facilement réaliser le centrage en HTML. Il convient de noter que lorsque vous utilisez l'attribut margin pour le centrage horizontal, vous devez spécifier une largeur fixe et définir les valeurs gauche et droite de l'attribut margin sur auto pour obtenir un affichage centré.

Résumé :

Cet article présente deux méthodes de centrage horizontal et deux méthodes de centrage vertical. Les propriétés text-align et margin conviennent au centrage horizontal, tandis que les propriétés display: table, display: flex et vertical-align conviennent au centrage vertical. . Quoi qu’il en soit, le centrage en HTML est facile.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML masquer l'affichageArticle suivant：HTML masquer l'affichage

Articles Liés

Voir plus