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

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

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

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

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

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

3 51
css mathjax

3 ответа:

просто набор text-align: center; на контейнере.

вот демо.

103

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

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

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

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

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

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

немного поздно, но похоже на ответ Ивека, вы можете избежать использования position декларации с помощью margin-left, а не left, так:

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

3