Comment aligner verticalement des éléments au sein d'un 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 deExemple
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 id="Vertically-Align-Elements">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>
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 deExemple
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 id="Vertically-Aligned-Element">Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
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 deExemple
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 id="Vertically-Align-Element">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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Programme C++ : ajouter un élément à un tableau
Aug 25, 2023 pm 10:29 PM
Un tableau est une structure de données séquentielle linéaire utilisée pour contenir des données homogènes dans des emplacements mémoire contigus. Comme les autres structures de données, les tableaux doivent avoir la capacité d'insérer, de supprimer, de parcourir et de mettre à jour des éléments de manière efficace. En C++, nos tableaux sont statiques. C++ fournit également des structures de tableaux dynamiques. Pour un tableau statique, les éléments Z peuvent être stockés dans le tableau. Jusqu'à présent, nous avons n éléments. Dans cet article, nous apprendrons comment insérer des éléments à la fin d’un tableau (également appelés éléments d’ajout) en C++. Comprenez le concept à travers des exemples. L'utilisation du mot-clé « this » est la suivante : GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin.
Effet de transition CSS : comment obtenir l'effet de glissement des éléments
Nov 21, 2023 pm 01:16 PM
Effet de transition CSS : Comment obtenir l'effet de glissement des éléments Introduction : Dans la conception Web, l'effet dynamique des éléments peut améliorer l'expérience utilisateur, parmi lesquels l'effet de glissement est un effet de transition courant et populaire. Grâce à la propriété de transition du CSS, nous pouvons facilement obtenir l'effet d'animation glissante des éléments. Cet article expliquera comment utiliser les propriétés de transition CSS pour obtenir l'effet de glissement des éléments et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer. 1. Introduction à la transition des attributs de transition CSS Attributs de transition CSS tra
Transformation CSS : comment obtenir l'effet de rotation des éléments
Nov 21, 2023 pm 06:36 PM
Transformation CSS : comment obtenir l'effet de rotation des éléments nécessite des exemples de code spécifiques. Dans la conception Web, les effets d'animation sont l'un des moyens importants pour améliorer l'expérience utilisateur et attirer l'attention de l'utilisateur, et l'animation de rotation est l'un des moyens les plus classiques. En CSS, vous pouvez utiliser l'attribut « transform » pour obtenir divers effets de déformation des éléments, y compris la rotation. Cet article présentera en détail comment utiliser la « transformation » CSS pour obtenir l'effet de rotation des éléments et fournira des exemples de code spécifiques. 1. Comment utiliser le « transf » de CSS
Dans JavaFX, quels sont les différents éléments du chemin ?
Aug 28, 2023 pm 12:53 PM
Le package javafx.scene.shape fournit des classes avec lesquelles vous pouvez dessiner diverses formes 2D, mais ce ne sont que des formes primitives comme des lignes, des cercles, des polygones et des ellipses, etc... Donc, si vous souhaitez dessiner des formes complexes. Pour des formes personnalisées, vous avez besoin pour utiliser la classe Path. Classe Path Classe Path Vous pouvez dessiner des chemins personnalisés à l'aide de ce contour géométrique qui représente une forme. Pour dessiner des chemins personnalisés, JavaFX fournit divers éléments de chemin, tous disponibles sous forme de classes dans le package javafx.scene.shape. LineTo - Cette classe représente la ligne de l'élément de chemin. Il vous aide à tracer une ligne droite depuis les coordonnées actuelles jusqu'aux (nouvelles) coordonnées spécifiées. HlineTo - Ceci est le tableau
Quels éléments ne sont pas pris en charge par HTML5
Aug 11, 2023 pm 01:25 PM
Les éléments non pris en charge par HTML5 sont les éléments purement expressifs, les éléments basés sur des cadres, les éléments d'application, les éléments remplaçables et les anciens éléments de formulaire. Introduction détaillée : 1. Éléments purement expressifs, tels que font, center, s, u, etc., ces éléments sont généralement utilisés pour contrôler le style et la mise en page du texte ; 2. Éléments basés sur des cadres, tels que frame, frameset et noframes ; les éléments sont utilisés dans Dans le passé, il était utilisé pour créer des mises en page Web et des fenêtres divisées. 3. Éléments liés à l'application, tels que l'applet, l'isinde, etc.
Comment implémenter une mise en page avec un menu de navigation fixe en utilisant HTML et CSS
Oct 26, 2023 am 11:02 AM
Comment utiliser HTML et CSS pour implémenter une mise en page avec un menu de navigation fixe. Dans la conception Web moderne, les menus de navigation fixes sont l'une des mises en page courantes. Il peut maintenir le menu de navigation toujours en haut ou sur le côté de la page, permettant aux utilisateurs de parcourir facilement le contenu Web. Cet article explique comment utiliser HTML et CSS pour implémenter une mise en page avec un menu de navigation fixe et fournit des exemples de code spécifiques. Tout d'abord, vous devez créer une structure HTML pour présenter le contenu de la page Web et le menu de navigation. Voici un exemple simple
Comment utiliser CSS pour obtenir l'effet de dégradé de transparence d'un élément
Nov 21, 2023 pm 01:38 PM
Comment utiliser CSS pour obtenir l'effet de dégradé de transparence des éléments Dans le développement Web, l'ajout d'effets de transition aux éléments de page Web est l'un des moyens importants pour améliorer l'expérience utilisateur. L'effet dégradé de transparence peut non seulement rendre la page plus fluide, mais également mettre en valeur le contenu clé de l'élément. Cet article expliquera comment utiliser CSS pour obtenir l'effet de dégradé de transparence des éléments et fournira des exemples de code spécifiques. Utiliser l'attribut de transition CSS Pour obtenir l'effet de dégradé de transparence d'un élément, nous devons utiliser l'attribut de transition CSS. t
Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT
May 01, 2023 pm 03:28 PM
Préface Récemment, il existe un script de navigateur basé sur ChatGPTAPI sur GitHub, openai-translator. En peu de temps, l'étoile a atteint 12k. En plus de prendre en charge la traduction, elle prend également en charge les fonctions de polissage et de synthèse. -ins, il utilise également le packaging tauri. Si vous avez un client de bureau, outre le fait que tauri utilise la partie rust, la partie navigateur est encore relativement simple à implémenter. Aujourd'hui, nous allons l'implémenter manuellement. L'interface fournie par openAI, par exemple, nous pouvons copier le code suivant et lancer une requête dans la console du navigateur pour terminer la traduction //Exemple constOPENAI_API_KEY="s
