¿Cómo centrar horizontalmente un elemento flotante de ancho variable?

¿Cómo centrar horizontalmente un elemento flotante de ancho variable?¿Cómo centrar horizontalmente un elemento flotante de ancho variable?

Editar: Ya tiene este trabajo usando una que contiene div para el elemento flotante y la especificación de un width para el recipiente (a continuación, utilizar margin: 0 auto; para el recipiente). Solo quería saber si se puede hacer sin usar un elemento contenedor o al menos sin tener que especificar width para el elemento contenedor.

Fuente

2009-08-05 Waleed Eissa

Si va a centrar, ¿por qué está flotando? – You

es una larga historia, la estoy flotando por otras razones –

posible duplicado de [** ¿Cómo centrar elementos flotantes? **] (http://stackoverflow.com/questions/4767971/how-to-center-float -elementos) – arnaud576875

Digamos que tienes una DIV que desea centrado horizontalmente:

<div id="foo">Lorem ipsum</div>

En el CSS que le diseñarlo con esto:

#foo 
{ 
    margin:0 auto; 
    width:30%; 
}

que establece que usted tiene un margen superior e inferior de cero píxeles, ya sea a la izquierda o a la derecha, calcula automáticamente cuánto se necesita para estar a la par.

No importa lo que ingrese para el ancho, siempre y cuando esté allí y no sea 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 de margen automático no funcionará.

Fuente

2009-08-05 09:31:43 random

El único problema aquí es que tiene que establecer explícitamente el ancho; 'width: auto;' no funciona (AFAIK). – You

Correcto, tienes que establecer algo como el ancho. Pero la pregunta era sobre el ancho variable, espero que no sea otra palabra para auto y en cambio algún valor fluctuante o cantidad relativa, como em o% – random

Gracias por su respuesta, en realidad no tengo problemas con los elementos de centrado, lo que hago ' Lo que intento hacer es centrar un "elemento flotante". Sé que esto no es posible en CSS, pero esperaba que alguien pudiera tener un truco que pudiera funcionar para esto, incluso traté de usar una tabla, pero eso tampoco funcionó. Lamentablemente, en mi caso, no hay forma de que el elemento no flote, lo necesito por razones específicas. –

Suponiendo que el elemento que está flotando y se centra es una div con un id="content" ...

<body> 
<div id="wrap"> 
    <div id="content"> 
    This will be centered 
    </div> 
</div> 
</body>

y aplicar los siguientes CSS:

#wrap { 
    float: left; 
    position: relative; 
    left: 50%; 
} 

#content { 
    float: left; 
    position: relative; 
    left: -50%; 
}

Aquí es un buen reference con respecto a eso.

Fuente

2009-08-05 10:06:50 Leyu

Gracias, echaré un vistazo a este –

También puedes probar 'margin-left' en lugar de' left' y 'position: relative'. Margin-left funcionó para mí en el elemento -50%. – Muhd

sí, pero ¿cuál es el valor agregado @muhd? – marcusklaas

¿No puedes simplemente usar display: inline block y align en center?

Example.

Fuente

2011-05-07 19:46:44 Kai

nada en su violín está flotando ... – Muhd

.center { 
    display: table; 
    margin: auto; 
}

Fuente

2012-04-10 22:54:48

esto funcionó mucho mejor para mí que la respuesta aceptada, ¡pruebe ambos! –

Prefiero este método también mejor, pero funciona en IE8 +, por lo que si necesita IE7 debe usar la respuesta aceptada. – isapir

Gracias - ahorré mi tiempo, de verdad! – Rossitten

Puede utilizar fit-content valor de width.

#wrap { 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    margin: auto; 
}

Nota: Solo funciona en los últimos navegadores.

Fuente

2013-08-13 10:17:22

La respuesta popular aquí sí funciona a veces, pero otras veces crea barras de desplazamiento horizontales que son difíciles de manejar, especialmente cuando se trata de navegaciones horizontales amplias y grandes menús desplegables. Aquí es una versión aún más ligero que ayuda a evitar esos casos extremos:

#wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
#content { 
    left: 50%; 
    position: relative; 
}

Proof that it is working!

Para responder más específicamente a su pregunta, es probable que no es posible hacerlo sin necesidad de crear algún elemento que contiene, sin embargo, es muy posible hacerlo sin especificar un valor de ancho. Espero que salve a alguien por ahí algunos dolores de cabeza!

Fuente

2014-04-15 21:49:20 fohryan

Esto funciona mejor cuando el id = contenedor (que es el div externo) y id = contenido (que es el div interno). El problema con la solución altamente recomendada a continuación es que, en algunos casos, se convierte en una barra de desplazamiento horizontal cuando el navegador intenta abastecer el atributo izquierdo: -50%. There is a good reference para esta solución

 #container { 
      text-align: center; 
     } 
     #contained { 
      text-align: left; 
      display: inline-block; 
     }

Fuente

2014-11-24 11:47:08

¿Cómo centrar horizontalmente un elemento flotante de ancho variable?

Respuesta

Cuestiones relacionadas