Maison >interface Web >tutoriel CSS >Puis-je centrer un élément de bloc en ligne sans utiliser « display: table » ?

Puis-je centrer un élément de bloc en ligne sans utiliser « display: table » ?

DDD
DDDoriginal
2024-12-28 13:15:10825parcourir

Can I Center an Inline-Block Element Without Using `display: table`?

Bloc en ligne d'affichage de centrage CSS

Question :

Dans un code fonctionnel, l'alignement central d'une classe wrap est obtenu en utilisant display: table. Cependant, l'utilisateur exprime une préférence pour l'utilisation de display: block ou display: inline-block à la place. La question se pose : existe-t-il une approche alternative pour obtenir un alignement central sans compter sur display:table ?

Solution :

Pour résoudre ce problème, introduisez simplement text-align : center au corps et display: inline-block à la classe wrap tout en éliminant la propriété display: table. Cette modification centre efficacement le contenu dans la classe wrap sans compromettre l'affichage souhaité : inline-block. Voici le CSS modifié :

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

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

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