Можно ли центрировать элемент встроенного блока, и если да, то каким образом?

У меня есть элемент изначально неизвестной ширины, в частности, уравнение MathJax, предоставленное пользователем. У меня есть элемент, установленный как встроенный блок, чтобы гарантировать, что ширина элемента соответствует его содержимому и поэтому имеет определенную ширину. Однако это предотвращает традиционные методы центрирования. То есть следующее не работает:

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

И решение не может быть:

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

Потому что я понятия не имею, какая ширина должна быть на самом деле заранее, и если пользователь нажимает на уравнение, мне нужно, чтобы все уравнение было выделено, поэтому я не могу установить ширину в 0. Есть ли у кого-нибудь решение для центрирования этого уравнения?

Ответы

Ответ 1

Просто установите text-align: center; на контейнер.

Вот демо.

Ответ 2

Другой способ сделать это (работает и с блочным элементом):

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

Объяснение: left: 50% позиционируют элемент начиная из центра содержащего родителя, поэтому вы хотите оттянуть его на половину своей ширины с помощью transform: translateX (-50% )

Note1: Обязательно установите положение, содержащее родителя, в положение: relative; если родительский элемент абсолютно позиционирован, установите 100% ширину и высоту, 0 заполняющих и полей div внутри и дайте ему положение: относительный

Примечание2: также можно изменить для вертикального центрирования с помощью

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

Ответ 3

Немного поздно, но, как и ответ Ivek, вы можете избежать объявления position, используя margin-left, а не left, поэтому:

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