Comment centrer un div en HTML
Les méthodes pour centrer un div en HTML incluent : la méthode margin définit la marge gauche et la marge supérieure de la marge à la valeur de l'élément parent moins l'élément enfant, puis la divise par 2 pour centrer le div en plus ; , la méthode de position peut également centrer le div Centrage
Lors de la mise en page, la partie principale de la page Web est souvent centrée sur la page. Cela nous oblige à réaliser un centrage horizontal du div. présentera en détail comment centrer le div sur la page dans l'article. Il a une certaine valeur de référence et j'espère que cela sera utile à tout le monde
[Recommandé cours : Tutoriel HTML]
Méthode de marge
Vous pouvez utiliser la marge pour centrer le div. margin-left est la largeur de l'élément parent moins la largeur de l'élément enfant puis divisée par 2 (Dans cet exemple : (400-100)/2=150px), la valeur de margin-top est la hauteur du parent élément moins la hauteur de l'élément enfant divisé par 2 (dans cet exemple : (300-100)/2= 100px)
Exemple :
<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>Rendu :
méthode de positionnement
Vous pouvez utiliser le positionnement pour centrer le div verticalement. Nous pouvons définir le positionnement absolu du sous-élément, et définissez les valeurs supérieure et gauche à 50%. Cependant, il convient de noter que lors de l'utilisation du positionnement, vous devez également définir la valeur de la marge, où margin- Les valeurs de gauche et de marge droite sont toutes deux négatives, et la taille de la valeur est la moitié de la largeur et de la hauteur de l'élément enfant
Exemple :
<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin:-50px 0 0 -50px
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>Rendu :
Référence pour cet article : https://www.html.cn/doc/html/layout/
Index des balises HTML : https://www.html.cn/sitemap.html
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère réussir cet article Peut vous aider à apprendre comment pour centrer un div sur la page
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
AI Hentai Generator
Générez AI Hentai gratuitement.
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)
Explication détaillée des propriétés de bordure CSS : padding, margin et border
Oct 21, 2023 am 11:07 AM
Propriétés des bordures CSS expliquées en détail : padding, margin et borderCSS est un langage de feuille de style utilisé pour contrôler et mettre en page les éléments d'une page Web. Dans la conception Web, l’attribut border est l’un des éléments les plus importants. Cet article présentera en détail comment utiliser l'attribut border en CSS et fournira des exemples de code spécifiques. padding La propriété padding est utilisée pour définir le remplissage d'un élément, qui est l'espace entre le contenu de l'élément et les bordures de l'élément. Nous pouvons définir le remplissage en utilisant des nombres positifs ou des valeurs en pourcentage
Que signifie la marge en CSS
Dec 18, 2023 am 10:30 AM
En CSS, margin est une propriété utilisée pour définir les marges extérieures d'un élément. Les marges sont l'espace entre la bordure d'un élément et son contenu. Margin peut accepter les valeurs suivantes : 1. Une seule valeur : par exemple, margin : 10px ; Définissez les quatre marges (haut, droite, bas, gauche) sur 10 pixels ; 2. Deux valeurs : par exemple, margin : 10px 20px ; Définissez les marges supérieure et inférieure sur 10 pixels et les marges gauche et droite sur 20 pixels, 3, quatre valeurs, etc.
Comment centrer un div à l'intérieur d'un autre div ?
Sep 08, 2023 am 11:13 AM
Introduction L'alignement central des divs est l'un des aspects les plus importants du développement front-end. Dans cet article, nous examinerons la technique consistant à placer un div dans un autre div en utilisant HTML et CSS. Dans ce didacticiel, nous aurons un div parent qui devrait avoir des div enfants. Notre tâche est de placer le div enfant au centre du div parent. En utilisant la syntaxe de traduction et de position Transform, ce n'est pas une manière très populaire d'aligner un div dans un autre div. syntaxe left:50%;top:50%;Transform:translate(-50%,-50%);above La syntaxe fait le suivant - La règle CSS "left:50%;" définit la position horizontale de l'élément sur
Explication détaillée des propriétés de mise en page du texte CSS : débordement de texte et espace blanc
Oct 20, 2023 am 11:19 AM
Explication détaillée des propriétés de mise en page du texte CSS : débordement de texte et espace blanc Dans la conception Web, la mise en page du texte est un lien très important. Une mise en page raisonnable peut rendre le texte plus lisible et plus beau. CSS fournit plusieurs propriétés pour contrôler la façon dont le texte est affiché, notamment le débordement de texte et l'espace blanc. Cet article détaillera l'utilisation et un exemple de code de ces deux propriétés. 1. texte d'attribut de débordement de texte
Que signifie la marge en HTML
Sep 13, 2021 pm 04:26 PM
En HTML, margin signifie « marge extérieure », qui fait référence à la zone vide entourant la bordure d'un élément ; la définition de la marge créera un « espace vide » supplémentaire à l'extérieur de l'élément, permettant une distance « vide » entre les cases. Pour définir les marges, vous devez utiliser la propriété CSS margin, qui accepte n'importe quelle unité de longueur, valeur en pourcentage ou même valeur négative.
L'attribut margin n'affecte pas les éléments en ligne
Feb 18, 2024 pm 04:36 PM
L'effet de la marge sur les éléments en ligne est différent de celui des éléments au niveau du bloc. Dans les éléments en ligne, l'attribut margin affecte uniquement les marges verticales supérieure et inférieure, pas les marges horizontales gauche et droite. Par exemple, s'il existe un élément de paragraphe en HTML, nous pouvons lui définir des styles et observer l'effet de l'attribut margin sur celui-ci. Le code HTML ressemble à ceci :
Que signifie la marge du fichier CSS ?
Jan 30, 2023 am 09:34 AM
La marge du fichier CSS est un attribut CSS utilisé pour définir l'espace autour de l'élément ; la marge représente la marge extérieure. Vous pouvez modifier les marges supérieure, inférieure, gauche et droite de l'élément individuellement, ou vous pouvez modifier tous les attributs en même temps ; L'attribut margin accepte n'importe quelle unité de longueur, valeurs en pourcentage ou même valeurs négatives.
Explorer les propriétés du modèle de boîte CSS : remplissage, marge et bordure
Oct 20, 2023 pm 03:09 PM
Exploration des propriétés du modèle de boîte CSS : padding, margin et border Le modèle de boîte CSS est l'un des concepts importants dans la mise en page Web. Dans le développement front-end, il est essentiel de comprendre et d’utiliser correctement les attributs padding, margin et border. Cet article approfondira l'utilisation et la corrélation de ces trois propriétés et fournira des exemples de code spécifiques. 1. Introduction au modèle de boîte Le modèle de boîte se compose de quatre parties : contenu, padding, bo
