Maison > interface Web > tutoriel CSS > Le bloc en ligne avec l'alignement du texte : centre peut-il remplacer l'affichage : tableau pour le centrage horizontal ?

Le bloc en ligne avec l'alignement du texte : centre peut-il remplacer l'affichage : tableau pour le centrage horizontal ?

Susan Sarandon
Libérer: 2024-12-24 19:13:21
original
284 Les gens l'ont consulté

Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?

Affichage central avec bloc en ligne : une solution alternative

Lors de l'alignement d'éléments centrés horizontalement avec un wrap, l'approche courante consiste à utiliser display: table pour le wrapper. Cependant, certains peuvent préférer une solution utilisant display: block ou display: inline-block.

La solution initiale présentait un problème : "wrap" display: table requis pour obtenir l'alignement souhaité. Une approche modifiée a émergé avec l'introduction de text-align: center appliqué à l'élément body et display: inline-block attribué au wrap. En supprimant display: table, nous arrivons à une solution alternative qui aligne efficacement les éléments centrés sans imposer de limitation de largeur fixe.

Code mis à jour :

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
Copier après la connexion

Cette modification conserve l'alignement souhaité tout en offrant une approche plus propre et potentiellement privilégiée pour certains scénarios.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal