Comment puis-je centrer un élément de bloc en utilisant uniquement « display : inline-block » en CSS ?

Affichage centré avec bloc en ligne en CSS

Dans le code donné, le corps du texte est aligné au centre à l'aide de text-align: center . La classe .wrap, qui utilisait auparavant display: table pour l'alignement, utilise désormais display: inline-block. Cela permet une mise en page plus flexible par rapport à l'utilisation d'un affichage de type tableau.

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

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Avec ces modifications, l'élément .wrap conserve son alignement au centre de la page tout en permettant au contenu de circuler. naturellement, comme s'il faisait partie du texte en ligne. Cette approche élimine le besoin d'une règle display: table supplémentaire, ce qui donne un code CSS plus rationalisé et plus polyvalent.

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!