Comment aligner verticalement des éléments au sein d'un div ?-tutoriel HTML-php.cn

Comment aligner verticalement des éléments au sein d'un div ?

WBOY

Libérer： 2023-08-20 17:37:19

avant

1139 Les gens l'ont consulté

Comment aligner verticalement des éléments au sein dun div ?

Nous pouvons facilement aligner verticalement des éléments dans un div en utilisant l'une des manières suivantes −

attribut de position
Attribut de hauteur de ligne
Remplir les attributs

Regardons les exemples un par un -

Utilisez l'attribut position pour aligner verticalement les éléments dans un div

La propriété position est utilisée pour positionner un élément. Elle peut être utilisée en conjonction avec les propriétés top, right, bottom et left pour positionner un élément là où vous le souhaitez. Voici les valeurs possibles de la propriété position −

statique − Les boîtes d'éléments sont disposées dans le cadre du flux normal de documents, suivant les éléments précédents et les éléments suivants.
relatif − La boîte de l'élément est disposée dans le cadre du flux normal, puis décalée d'une certaine distance.
absolu − La boîte d'un élément est disposée par rapport à son bloc conteneur et complètement supprimée du flux normal du document.
fixe − La boîte d'éléments est positionnée de manière absolue et a la description de comportement de position : absolue. La principale différence est que le bloc contenant les éléments positionnés de manière fixe est toujours la fenêtre.

Voyons maintenant un exemple d'alignement vertical d'éléments dans un div à l'aide de l'attribut position −

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      #demo1 {
         position: relative;
      }
      #demo2 {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;
      }
      #demo1 {
         background-color: yellow;
         border: 2px solid gray;
         height: 15em;
      }
      #demo2 {
         background-color: skyblue;
         border: 1px solid orange;
         width: 100%;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Elements</h1>
   <p>Use the position property:</p>
   <div id="demo1">
      <div id="demo2">
         <p>This is a demo text</p>
         <p>This is another demo text</p>
      </div>
   </div>
</body>
</html>

Copier après la connexion

Utilisez la propriété line-height pour aligner verticalement les éléments dans un div

L'attribut line-height modifie la hauteur de la zone en ligne qui constitue une ligne de texte. Voici les valeurs possibles pour line-height -

normal − demande au navigateur de définir la hauteur des lignes dans les éléments à une distance "raisonnable".
numéro − La hauteur réelle des lignes dans l'élément est cette valeur multipliée par la taille de la police de l'élément.
length − La hauteur de la ligne dans l'élément est la valeur donnée.
Pourcentage − La hauteur d'une ligne dans un élément est calculée en pourcentage de la taille de la police de l'élément.

Voyons maintenant un exemple d'alignement vertical d'éléments dans un div à l'aide de la propriété line-height -

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      p {
         margin: 0;
      }
      #demo {
         border: 3px solid yellow;
         background-color: orange;
         height: 100px;
         line-height: 100px;
      }
   </style>
</head>
<body>
   <h1>Vertically Aligned Element</h1>
   <p>Use the line-height property:</p>
   <div id="demo">
      <p>This is demo text</p>
   </div>
</body>
</html>

Copier après la connexion

Utilisez l'attribut padding pour aligner verticalement les éléments dans div

La propriété

padding vous permet de spécifier combien d'espace doit apparaître entre le contenu d'un élément et sa bordure. La valeur de cet attribut doit être la longueur, le pourcentage ou le mot hériter. Si la valeur est héritée, son remplissage sera le même que celui de son élément parent. Si vous utilisez des pourcentages, les pourcentages sont relatifs à la boîte contenante.

Les propriétés CSS suivantes peuvent être utilisées pour contrôler les listes. Vous pouvez également définir différentes valeurs de remplissage pour chaque côté de la boîte en utilisant les propriétés suivantes -

Le padding-bottom spécifie le remplissage inférieur d'un élément.
Le padding-top spécifie le remplissage supérieur d'un élément.
Le padding-left spécifie le remplissage gauche d'un élément.
Le padding-right spécifie le bon remplissage d'un élément.
Le padding sert de raccourci pour les propriétés précédentes.

Voyons maintenant un exemple pour aligner verticalement des éléments dans un div en utilisant la propriété padding −

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Align Element</title>
   <style>
      .demo {
         padding: 60px 0;
         border: 2px solid #5c34eb;
         background-color: orange;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Element</h1>
   <p>Use the padding property:</p>
   <div class="demo">
      <p>This is demo text.</p>
      <p>This is another text.</p>
   </div>
</body>
</html>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment aligner verticalement des éléments au sein d'un div ?

Utilisez l'attribut position pour aligner verticalement les éléments dans un div

Exemple

Exemple

Utilisez la propriété line-height pour aligner verticalement les éléments dans un div

Exemple

Exemple

Utilisez l'attribut padding pour aligner verticalement les éléments dans div

Exemple

Exemple