Maison >interface Web >tutoriel CSS >Comment centrer un élément de bloc en ligne sans rompre la réactivité ?

Comment centrer un élément de bloc en ligne sans rompre la réactivité ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-09 13:20:02843parcourir

How to Center an Inline-Block Element Without Breaking Responsiveness?

Comment centrer un élément de bloc en ligne

Le centrage d'un élément de bloc en ligne peut être délicat en raison des limitations des méthodes traditionnelles. Cependant, il existe une solution simple utilisant CSS.

Le problème

Tenter de centrer un élément de bloc en ligne à l'aide de margin-left et margin-right auto ne fonctionne pas fonctionnent car les éléments de bloc en ligne n'ont pas de largeurs définies. Définir la propriété display sur block résoudrait le problème de centrage mais briserait la réactivité et empêcherait la mise en évidence de l'élément entier.

La solution

Pour centrer un élément de bloc en ligne, set text-align : centre sur le conteneur. Cela centrera l'élément de bloc en ligne horizontalement dans le conteneur.

Exemple

.container {
  text-align: center;
}

.equationElement {
  display: inline-block;
}

Démo

[Démo Lien ici]

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