Maison > Article > interface Web > Comment puis-je aligner le texte en CSS pour que les deux colonnes restent droites ?

Comment puis-je aligner le texte en CSS pour que les deux colonnes restent droites ?

王林avant: 2023-09-15 16:45:03822parcourir

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour spécifier l'apparence et le formatage des documents HTML. En dissociant la présentation du contenu de la structure de la page Web, CSS vous permet de contrôler la mise en page, les couleurs, les polices et autres styles de votre site Web.

Vous pouvez utiliser la propriété display: table de CSS pour créer une structure de type tableau afin de rendre les deux colonnes droites lors de l'alignement du texte en CSS. Ensuite, lorsque vous utilisez l'attribut display: table-cell, définissez top ou bottom comme attribut d'alignement vertical pour chaque colonne afin d'aligner le texte de manière appropriée.

Méthode

Voici quelques façons typiques d'aligner du texte en CSS -

Utiliser les propriétés d'alignement du texte
Utiliser l'attribut d'affichage
Utiliser les propriétés float

Comprenons maintenant chaque méthode en détail avec des exemples.

Méthode 1 : utilisez l'attribut « text-align »

La première façon d'aligner le texte (les deux colonnes sont droites) en CSS est d'utiliser la propriété "text-align". Le texte dans un élément conteneur peut être aligné à l'aide de la propriété text-align. Il accepte des valeurs telles que centre, gauche et aligné.

Exemple

Dans l'exemple suivant, nous apprendrons comment aligner du texte en CSS en utilisant la propriété « text-align »

Étape 1 - Créer un élément conteneur en HTML comme un div -

<div class="container">
   <!-- Your content goes here -->
</div>

Étape 2 - Créez deux éléments enfants pour les deux colonnes à l'intérieur de l'élément conteneur -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Étape 3− Les styles CSS doivent être ajoutés aux éléments de conteneur et de colonne −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

Étape 4 - Remplir les éléments de colonne avec du contenu -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Étape 5 - Vous pouvez observer le texte disposé en deux colonnes droites en prévisualisant les résultats dans le navigateur de votre ordinateur.

Étape 6 - Le code final ressemble à ceci -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Méthode 2 : utilisez « attribut d'affichage »

Pour créer une mise en page flexible, définissez la propriété d'affichage sur flex ou grille. À l’aide des propriétés justifier-content et align-items, vous pouvez gérer la position des éléments dans différents modes de mise en page.

Exemple

Dans l'exemple suivant, nous apprendrons comment aligner le texte en CSS à l'aide de l'attribut d'affichage

Étape 1 - Créer un élément conteneur en HTML comme un div -

<div class="container">
   <!-- Your content goes here -->
</div>

Étape 2 - Créez deux éléments enfants pour les deux colonnes à l'intérieur de l'élément conteneur -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Étape 3− Les styles CSS doivent être ajoutés aux éléments de conteneur et de colonne −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

Étape 4 - Remplir les éléments de colonne avec du contenu -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Étape 5 - Vous pouvez observer le texte disposé en deux colonnes droites en prévisualisant les résultats dans le navigateur de votre ordinateur.

Étape 6 - Le code final ressemble à ceci -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Méthode 3 : utilisez « attribut float »

À l'aide de l'attribut float, un élément peut flotter sur le côté gauche ou droit de son conteneur parent. Vous pouvez l'utiliser pour créer du texte aligné sur plusieurs colonnes afin de créer une mise en page à plusieurs colonnes.

Exemple

Dans l'exemple suivant, nous apprendrons comment aligner du texte en CSS à l'aide de la propriété Float

Étape 1 - Créer un élément conteneur en HTML comme un div -

<div class="container">
   <!-- Your content goes here -->
</div>

Étape 2 - Créez deux éléments enfants pour les deux colonnes à l'intérieur de l'élément conteneur -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Étape 3− Les styles CSS doivent être ajoutés aux éléments de conteneur et de colonne −

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

Étape 4 - Remplir les éléments de colonne avec du contenu -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Étape 5 - Vous pouvez observer le texte disposé en deux colonnes droites en prévisualisant les résultats dans le navigateur de votre ordinateur.

Étape 6 - Le code final ressemble à ceci -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Conclusion

L'attribut text-align et l'attribut display en CSS peuvent aligner le texte sur deux colonnes verticales. L'attribut display indique la disposition de l'élément, par exemple s'il doit être affiché en tant qu'élément de niveau bloc ou élément en ligne.

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!

css html Float 样式表 display flex table

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment pouvons-nous utiliser différentes classes CSS en HTML ?Article suivant：Comment pouvons-nous utiliser différentes classes CSS en HTML ?

Articles Liés

Voir plus