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

Tengo un elemento de ancho inicialmente desconocido, específicamente una ecuación MathJax proporcionada por el usuario. Tengo el elemento configurado como bloque en línea para garantizar que el ancho del elemento se ajuste a su contenido y para que tenga un ancho definido. Sin embargo, esto evita los métodos tradicionales de centrado. Es decir, el siguiente no funciona:¿Es posible centrar un elemento de bloque en línea y, de ser así, cómo?

.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 lo que el ancho en realidad debería ser de antemano y si el usuario hace clic en la ecuación, Necesito toda la ecuación resaltada, por lo que no puedo establecer el ancho en 0. ¿Alguien tiene una solución para centrar esta ecuación?

Fuente

2011-09-29 Deets McGeets

por cierto, el registro parece brok es con Chrome en esa página. No ocurre nada si hago clic en el botón Registrar, con y sin JavaScript. – phihag

¡Fascinante! Estoy usando Chrome y funciona bien para mí. ¿Qué tipo de cuenta estás usando? Google, Facebook, Twitter? –

myopenid. Estoy 100% no funcionará en google chrome si JavaScript está desactivado. El botón no tiene ni siquiera un formulario, y no es un botón de envío de todos modos. – phihag

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

Here's a demo.

Fuente

2011-09-29 18:24:27 phihag

Esta es una gran idea y funciona si configuro 'display: block' pero luego el elemento toma el ancho de su contenedor o tendría que establecer el ancho manualmente pero no sé cuál será el ancho . No funciona si el elemento está configurado como 'inline-block'. La razón por la cual necesita ser 'inline-block' es para que su ancho sea dinámico a su contenido. Gracias por la gran idea sin embargo. Si puede modificarlo de modo que funcione para 'inline-block' que sería perfecto. –

@Vivek Viswanathan ¿Podría explicar por qué "no funciona si el elemento está configurado como bloque en línea"? Se agregó un [enlace] (http://phihag.de/2011/so/inline-block-center.html) a una página de demostración. – phihag

Parece que funciona porque 'text-align: center' se establece en el elemento primario. Sin embargo, no puedo hacer eso en mi código porque el elemento 'inline-block' tiene hermanos que no pueden estar centrados. Gracias de nuevo por su ayuda en esto. –

Otra manera de hacer esto (obras para el elemento de bloque también):

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

Explicación: izquierda: 50% posicionará el elemento partir del centro de contener los padres, por lo que desea tirar de ella por medio de su anchura con transformar: translateX (-50%)

Nota 1: Asegúrese de ajustar la posición de la que contiene los padres a la posición: relative; Si el padre está posicionado absolutamente puso un 100% de ancho y altura, 0 relleno y div margen interior y darle position: relative

Nota 2: también se pueden modificar para el centrado vertical con

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

Fuente

2015-12-03 17:02:53 Ivek

¡este es asombroso! – metahamza

No necesita el posicionamiento 'absoluto' y puede usar' margin: 50%; ' – Kevin

No necesita absoluto, pero left/right no funcionará si la posición es' static' (posicionamiento predeterminado de los elementos). Si 'absolute' no es una necesidad específica, debe usar' relative' –

Un poco tarde, pero similar a la respuesta de Ivek, se puede evitar el uso de la declaración position utilizando margin-left en lugar de left, por lo que:

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

Fuente

2017-10-05 16:47:07

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

Respuesta

Cuestiones relacionadas