Можно ли центрировать элемент inline-block и если да, то как?

Question

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

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

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

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

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

Answer 1

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

Вот демоверсия .

Answer 2

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

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

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

Примечание 1: Обязательно установите положение родительского элемента в положение: относительный; если родительский элемент абсолютно позиционирован, поместите 100% ширину и высоту, отступы 0 и поле отступа внутри него и задайте ему положение: относительный

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

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

Answer 3

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

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