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

J’ai un élément de largeur initialement inconnue, en particulier une équation MathJax fournie par l’utilisateur. J’ai l’élément défini en tant que bloc en ligne pour garantir que la largeur de l’élément correspond à son contenu et 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 la largeur réelle et si l’utilisateur clique sur l’équation, j’ai besoin que l’équation entière soit mise en évidence, donc je ne peux pas définir la largeur à 0. Quelqu’un at-il une solution pour centrer cette équation?

    Définissez simplement text-align: center; sur le récipient.

    Voici une démo .

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

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

    Explication: à gauche: 50% positionneront l’élément en partant du centre du parent contenant, de sorte que vous souhaitez le ramener de moitié avec transform: translateX (-50%)

    Note 1: Veillez à définir la position de contenant parent sur position: relative; Si le parent est absolument positionné, placez-y une largeur et une hauteur de 100%, un espacement de 0 et un div de marge et donnez-lui la position: relative

    Note 2: Peut aussi être modifié pour le centrage vertical avec

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

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

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