Maison > interface Web > tutoriel HTML > le corps du texte

Quelles sont les méthodes de centrage CSS ?

零下一度
Libérer: 2017-06-24 14:31:27
original
1631 Les gens l'ont consulté

1.text-align:center;

Utiliser la méthode ci-dessus pour centrer consiste à centrer horizontalement les éléments en ligne ou le texte de display:inline;

2.inline-height:(height) value;

Lors de l'utilisation de inline-height, il est souvent utilisé avec height pour centrer le contenu verticalement. recommandé de l'utiliser dans la liste Utilisé en interne

3.margin:auto;

Lors de l'utilisation de la marge au centre, généralement lorsque l'élément donne la largeur exacte value, set margin :auto; ou margin: 0 auto; ont le même effet : l'élément actuel sera centré horizontalement

Lorsque vous utilisez margin, vous pouvez également définir les valeurs de margin-left et margin ; -droit pour être égal, et vous pouvez également réaliser un centrage horizontal ;

4. Positionnement et centrage

Le réglage selon le haut et la gauche ou le bas et la droite peut. centrer l'élément horizontalement et verticalement ; mais la hauteur de l'élément parent doit être définie ;

5.Flex box

Flex-align:center du conteneur Flex;

align-items:center;

justifier-cotent:center;

Attribut du projet align-self:center;

6. :

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }
Copier après la connexion

 Le code ci-dessus peut réaliser un centrage horizontal et vertical des éléments.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal