affichage du centre des paramètres HTML-Questions et réponses frontales-php.cn

affichage du centre des paramètres HTML

WBOY

Libérer： 2023-05-21 17:07:37

original

27147 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!