Maison  >  Article  >  interface Web  >  Comment centrer des éléments de bloc en ligne avec une largeur inconnue ?

Comment centrer des éléments de bloc en ligne avec une largeur inconnue ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-08 18:54:02265parcourir

How to Center Inline-Block Elements with Unknown Width?

Centrage des éléments de bloc en ligne

Il est possible de centrer un élément de bloc en ligne à l'aide de la propriété text-align sur l'élément conteneur.

Énoncé du problème

Lors de l'utilisation de CSS pour styliser un élément de bloc en ligne de largeur inconnue, les méthodes de centrage traditionnelles utilisant les marges automatiques ne fonctionnent pas. Définir une largeur fixe n'est pas non plus une option viable car cela empêcherait une mise en évidence correcte de l'élément.

Solution

Pour centrer un élément de bloc en ligne avec une largeur inconnue , définissez simplement text-align: center; sur le conteneur parent. Cela centrera l'élément horizontalement dans son conteneur.

Exemple

Considérez le code suivant :

.container {
  text-align: center;
}

.equation-element {
  display: inline-block;
}

Ce code centrera l'équation- élément dans le conteneur, quel que soit son largeur.

Démo

[Démo en direct](https://example.com)

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