¿Es posible centrar un elemento de bloque en línea y, si es así, cómo?

Tengo un elemento de ancho inicialmente desconocido, específicamente una ecuación de MathJax suministrada por el usuario. Tengo el elemento establecido como bloque en línea para asegurar que el ancho del elemento se ajuste a su contenido y para que tenga un ancho definido. Sin embargo, esto impide los métodos tradicionales de centrado. Es decir, lo siguiente no funciona:

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

Y la solución no puede ser:

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

Porque no tengo idea de cuál debería ser el ancho de antemano y si el usuario hace clic en la ecuación, necesito toda la ecuación resaltada, así que no puedo establecer el ancho a 0. ¿Alguien tiene una solución para centrar esta ecuación?

 51
cssmathjax
Author: Deets McGeets, 2011-09-29
Source

3 answers

Simplemente establezca text-align: center; en el contenedor.

Aquí hay una demo .

 103
Author: phihag,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-29 18:34:29

Otra forma de hacer esto (funciona también para el elemento block):

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

Explicación: left: 50% posicionará el elemento comenzando desde el centro del padre que contiene, por lo que desea retirarlo a la mitad de su ancho con transform: translateX(-50%)

Nota1: Asegúrese de establecer la posición del padre que contiene a position: relative; si el padre está absolutamente posicionado, coloque un ancho y alto del 100%, un relleno 0 y un div de margen dentro de él y déle posición: relativo

Nota 2: También se puede modificar para el centrado vertical con

top:50%;
transform: translateY(-50%);
 20
Author: Ivek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-03 17:02:53

Un poco tarde, pero similar a la respuesta de Ivek, puedes evitar usar la declaración position usando margin-left en lugar de left, así que:

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

 3
Author: Amie Wilt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-05 16:47:07