Résumer les solutions au problème de centrage CSS
Problèmes rencontrés avec le centrage CSSRésumé
Centrage horizontal
-
[Éléments en ligne] applicables aux inline, inline-block, inline-table , l'élément inline-flex
.center { text-align: center; }
Copier après la connexion -
[Élément de niveau bloc] s'applique à l'élément de niveau bloc
①Un élément de niveau bloc
.center { margin: 0 auto; }
Copier après la connexion②Plusieurs éléments au niveau du bloc
方法一:将块级元素变为行内块级元素 html部分: <main class="inline-block-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .inline-block-center { text-align: center; } .inline-block-center p { display: inline-block; text-align: left; } 方法二:flex布局 html部分: <main class="flex-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .flex-center{ display:flex; justify-content:center; }
Copier après la connexion
Centrés verticalement
-
[Éléments en ligne]
①Élément en ligne unique :
Cas 1 : lorsque le lien ou le texte a un élément enveloppé, définissez un remplissage supérieur et inférieur égal
.link { padding-top: 30px; padding-bottom: 30px; }
Copier après la connexionCas 2 : lorsque le lien ou le texte n'a pas d'enveloppe, définissez la ligne la hauteur et la hauteur doivent être égales
.center-text-trick { height: 100px; line-height: 100px }
Copier après la connexion②Plusieurs éléments en ligne :
方法一:将多个行内元素分别置于table-cell中 html部分: <table> <tr> <td> 1 </td> </tr> </table> css部分: table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ } 方法二:将父元素设置为display:table,将自身设置为display:table-cell html部分: <p class="center-table"> <p>1</p> </p> css部分: .center-table { display: table; height: 250px; width: 240px; } .center-table p { display: table-cell; vertical-align: middle; } 方法三:使用felex html部分: <p class="flex-center"> <p>1</p> </p> css部分: .flex-center{ display: flex; justify-content: center; flex-direction: column; height: 400px;/*父容器必须有固定高度*/ } 方法四:当以上代码均不可用时,可尝试此奇淫巧技 html部分: <p class="ghost-center"> <p>1</p> </p> css部分: .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }
Copier après la connexion -
[Éléments au niveau du bloc]
①Hauteur de l'élément connue ( Positionnement absolu Marge négative)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/ }
Copier après la connexion② Hauteur de l'élément inconnue (similaire à la méthode précédente)
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
Copier après la connexion③disposition flexible
.parent { display: flex; flex-direction: column; justify-content: center; }
Copier après la connexion
Centrés horizontalement et verticalement
① Éléments avec largeur et hauteur fixes
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/ }
② Éléments sans largeur et hauteur fixes (identiques aux éléments précédents sans largeur fixe et la hauteur, utilisez la solution de transformation)
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
③Utilisez la disposition flexbox
.parent { display: flex; justify-content: center; align-items: center; }
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)

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.

L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)

Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et

Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
