Nous pouvons facilement aligner verticalement des éléments dans un div en utilisant l'une des manières suivantes −
Regardons les exemples un par un -
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
<!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>
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<!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>
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 -
Voyons maintenant un exemple pour aligner verticalement des éléments dans un div en utilisant la propriété padding −
La traduction chinoise de<!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>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
