css - texto - centrar position absolute
¿Cómo centrar horizontalmente un elemento flotante de un ancho variable? (7)
¿Cómo centrar horizontalmente un elemento flotante de un ancho variable?
Edición: ya tengo este trabajo usando un div contiene para el elemento flotante y especificando un width para el contenedor (luego use margin: 0 auto; para el contenedor). Solo quería saber si se puede hacer sin usar un elemento contenedor o al menos sin tener que especificar un width para el elemento contenedor.
¿No puedes usar simplemente display: inline block y align al center ?
Example .
Digamos que tienes un DIV que quieres centrar horizontalmente:
<div id="foo">Lorem ipsum</div>
En el CSS lo estilizarías con esto:
#foo
{
margin:0 auto;
width:30%;
}
Lo que indica que tiene un margen superior e inferior de cero píxeles y, a la izquierda o a la derecha, calcula automáticamente cuánto se necesita para ser uniforme.
Realmente no importa lo que pones para el ancho, siempre y cuando esté ahí y no sea del 100%. De lo contrario no estarías poniendo el centro en nada.
Pero si lo hace flotar, hacia la izquierda o hacia la derecha, entonces las apuestas están desactivadas, ya que eso lo saca del flujo normal de elementos en la página y la configuración del margen automático no funcionará.
Esto funciona mejor cuando el id = contenedor (que es el div exterior) y el id = contenido (que es el div interno). El problema con la solución altamente recomendada es que en algunos casos se traduce en una barra de desplazamiento horizontal cuando el navegador intenta atender el atributo izquierdo: -50%. Hay una buena referencia para esta solución.
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
La respuesta popular aquí funciona a veces, pero otras veces crea barras de desplazamiento horizontales que son difíciles de manejar, especialmente cuando se trata de navegaciones horizontales anchas y grandes menús desplegables. Aquí hay una versión aún más liviana que ayuda a evitar esos casos de borde:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
¡Prueba de que está funcionando!
Para responder más específicamente a su pregunta, probablemente no sea posible hacerlo sin configurar algún elemento que contenga, sin embargo, es muy posible hacerlo sin especificar un valor de ancho. Espero que ahorre a alguien por ahí algunos dolores de cabeza!
Puede utilizar el valor de fit-content para el width .
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Nota: Funciona solo en los últimos navegadores.
Suponiendo que el elemento que está flotando y estará centrado es un div con id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Y aplica el siguiente CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Aquí hay una buena reference respecto.
.center {
display: table;
margin: auto;
}