Comment centrer un élément de bloc ?-tutoriel CSS-php.cn

Comment centrer un élément de bloc ?

WBOY

Libérer： 2023-09-05 18:13:02

avant

1324 Les gens l'ont consulté

Comment centrer un élément de bloc ?

La propriété margin en CSS peut être utilisée pour centrer des éléments de bloc (comme les divs) horizontalement. Nous pouvons définir la largeur de l'élément, ce qui empêche le conteneur de s'étirer. L'élément block occupe une ligne complète d'espace, ce qui oblige les autres éléments à occuper la ligne suivante car l'élément block possède 100 % du conteneur.

Centrer les éléments de bloc d'alignement

Tout élément d'une page Web qui commence une nouvelle ligne est considéré comme un élément de niveau bloc. Par exemple, balise de titre, div, etc.

Ces éléments de bloc occupent toute la largeur de la page Web. Disons que nous avons un élément sur notre page Web qui n'occupe que 10 % de la page Web, mais s'il s'agissait d'un élément de bloc, il occuperait 100 % de la largeur elle-même.

Nous pouvons modifier l'attribut d'affichage de n'importe quel élément spécifique en définissant la valeur sur l'attribut de bloc.

Syntaxe

Regardons les propriétés d'affichage -

display: value;

Copier après la connexion

Ce qui précède est la syntaxe de l'attribut display, qui peut être utilisé pour définir l'apparence d'éléments spécifiques sur une page Web.

Propriétés de marge

Maintenant que nous savons comment se comporte l'élément block, nous allons utiliser la propriété margin pour aligner l'élément horizontalement.

L'attribut

margin contrôlera la position de l'élément de bloc. Nous utiliserons cette propriété de manière à ce que l'élément soit centré, puisque les marges contrôlent l'élément à la fois dans les plans horizontalet vertical.

Grammaire

Regardons la syntaxe de la propriété margin -

margin: value;

Copier après la connexion

Voici la syntaxe de l'attribut margin et les marges doivent être spécifiées de gauche à droite afin que l'élément de bloc soit centré. La valeur auto peut être utilisée pour définir les marges afin que les éléments de bloc soient automatiquement centrés.

REMARQUE - Il existe un attribut text-align et son centre de valeur. Cette propriété ne peut pas être utilisée avec cette méthode car elle est utilisée pour centrer des éléments non bloquants tels que des paragraphes, des balises span, etc.

Exemple

Pour mieux comprendre la fonctionnalité de cette propriété, regardons un exemple dans lequel nous ajoutons des en-têtes et un div avec des marges définies sur auto dans la section Propriétés CSS, puis les alignons avec deux blocs internes liés se déplacent ensemble. Différentes couleurs de divs nous renseignent sur différents affichages, tels que les blocs en ligne, etc.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of text alignment to the center</title>
   <style>
      *{
         background-color:black;
      }
      .para {
         color:white;
         text-align: center;
      }
      .testinline { 
         padding: 10px; 
         border: 2px solid blue; 
      } 
      h1 {
         font-size: 35px;
         color: white;
         width: fit-content;
         margin: auto;
      }
      .container {
         background-color: lightblue;  
         margin: auto;
         border:  solid red 1px; 
         padding: 15px 10px; 
         text-align: center; 
         width: fit-content;
      }
      .good-night {
         padding: 10px;
         border: 2px solid blue;
         color: white;
         display: inline-block;
      }
      .good-morning {
          padding: 10px;
          text-align: center;
          color: white;
      }
   </style>
</head>
<body>
   <h1>Hi, this an example</h1>
   <p class="para">We are aligning the block elements to the text.</p>
   <h1>Welcome</h1>
   <div class="container">
      How is your day Going
   </div>
   <div class="good-morning">
      <div style="display: inline-block" class="testinline">
         Good Morning
      </div>
      <div style="display: inline-block" class="testinline">
         Good Night
      </div>
   </div>
</body>
</html>

Copier après la connexion

Dans le résultat ci-dessus, vous pouvez voir que les éléments title et div pivotent avec les balises de paragraphe. Nous utilisons l'attribut text-align pour aligner la balise de paragraphe au centre et l'attribut margin et définissons sa valeur sur auto pour aligner l'élément de bloc.

Exemple

Dans le programme ci-dessous, nous obtiendrons une image et un élément non bloquant à côté de l'image. Nous définissons ensuite l'affichage de l'image sur bloc, définissons ses marges sur automatique, puis l'alignons au centre avec le titre et définissons la propriété d'affichage du paragraphe sur bloc en ligne.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example for text alignment </title>
   <style>
      h1 {
         margin: auto;
         width: 30%;
         font-size: 24px;
         margin-bottom: 8px;
         background-color: black;
         color: white;
      }
      .image{
         display: block;
         margin: auto;
      }
   </style>
</head>
<body>
   <h1>
      Example for setting the block element
   </h1>
   <img  class="image" src="https://www.tutorialspoint.com/images/logo.png" alt="Comment centrer un élément de bloc ?" >
   <p style="display: inline-block;">
      Hi this is another example for aligning the block element to the centre.
   </p>
</body>
</html>

Copier après la connexion

Dans le résultat, vous pouvez voir que l'image est au centre et le texte est sur la ligne suivante, comme nous le souhaitons.

Conclusion

L'alignement des éléments de bloc au centre est un excellent moyen de créer une disposition équilibrée et symétrique. Vous pouvez aligner rapidement et facilement n'importe quel nombre d'éléments de votre conception en utilisant l'alignement du texte ou les valeurs automatiques de marge. Avec un peu de pratique, vous pourrez utiliser ces techniques en toute confiance !

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!