web-dev-qa-db-fra.com

Est-il possible de centrer un élément de bloc en ligne et si oui, comment?

J'ai un élément de largeur initialement inconnue, spécifiquement une équation MathJax fournie par l'utilisateur. J'ai l'élément défini comme bloc en ligne pour m'assurer que la largeur de l'élément correspond à son contenu et pour qu'il ait une largeur définie. Cependant, cela empêche les méthodes traditionnelles de centrage. Autrement dit, ce qui suit ne fonctionne pas:

.equationElement
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

Et la solution ne peut pas être:

.equationElement
{
    display: block;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

Parce que je n'ai aucune idée de ce que la largeur doit être réellement à l'avance et si l'utilisateur clique sur l'équation, j'ai besoin que toute l'équation soit mise en surbrillance, donc je ne peux pas régler la largeur à 0. Quelqu'un a-t-il une solution pour centrer cette équation?

cssmathjax
56
Deets McGeets

Réglez simplement text-align: center; sur le récipient.

Voici une démo .

112
phihag

Une autre façon de le faire (fonctionne également pour l'élément bloc):

.center-horizontal {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}

Explication: à gauche: 50% positionnera l'élément début à partir du centre du parent contenant, donc vous voulez le retirer de la moitié de sa largeur avec transform: translateX (- 50%)

Remarque 1: veillez à définir la position du parent contenant sur position: relative; si le parent est absolument positionné, mettez une largeur et une hauteur de 100%, 0 rembourrage et marge div à l'intérieur et donnez-lui la position: relative

Remarque 2: peut également être modifié pour le centrage vertical avec

top:50%;
transform: translateY(-50%);
22
Ivek

Un peu tard, mais similaire à la réponse d'Ivek, vous pouvez éviter d'utiliser la déclaration position en utilisant margin-left Plutôt que left, donc:

margin-left: 50%; transform: translateX(-50%);

7
Amie Wilt