Maison >interface Web >tutoriel CSS >Comment puis-je centrer horizontalement un conteneur de contenu sans utiliser « display: table » ?

Comment puis-je centrer horizontalement un conteneur de contenu sans utiliser « display: table » ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-19 00:17:15513parcourir

How Can I Horizontally Center a Content Container Without Using `display: table`?

Centrage de l'affichage : inline-block

Dans une mise en page composée d'une barre latérale et d'un conteneur de contenu, l'objectif est de centrer horizontalement le contenu sans utiliser de largeurs fixes. Lors de l'utilisation de display: table accomplit cela, ce n'est pas préféré. Cet article explore une solution alternative utilisant display:inline-block.

Pour centrer le contenu, le CSS suivant peut être appliqué :

body {
    text-align: center;
}

.wrap {
    display: inline-block;
}

Dans cette modification, display: table est supprimé de .envelopper. De plus, text-align: center est ajouté au corps, garantissant que le contenu est centré dans l'espace horizontal disponible.

Cette méthode alternative permet d'obtenir l'effet de centrage souhaité sans avoir besoin de display:table. Il s'agit d'une approche plus simple et flexible qui peut s'adapter à différents scénarios d'aménagement.

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!

Déclaration:
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