¿Cómo puedo hacer que el ancho de un DIV se comporte como cuando se configura float:left, pero sin configurar un flotante? width:auto parece que no lo hace (en cromo).¿Cómo puedo permitir que un div establezca automáticamente su propio ancho?
Estoy tratando de obtener algo como lo siguiente para trabajar ...
.center
{
margin-left: auto;
margin-right: auto;
width: auto;
}
usted podría intentar display: inline-block y ver si funciona en su situación. Sin embargo, no podrá centrarlo usando margin-left: auto & margin-right: auto porque esa técnica requiere un valor de ancho.
Si es posible, use display: inline-block y configure text-align: center en su contenedor.
<div style="text-align: center">
<div style="display: inline-block;">
This will expand only as far as it needs to
</div>
</div>
Ver demostración de trabajo en jsFiddle: http://jsfiddle.net/64kY8/
<div> s son elementos de bloque. Toman todo el ancho de sus contenedores. Período. Al igual que <body> o <html>
Su regla anterior está haciendo esencialmente esto: div { width:100%; margin:0 auto; } como el 100% de su valor es automático.
inline-block funcionaría, pero no funcionará exactamente como un verdadero elemento inline-block.
Básicamente ... no puede hacerlo sin establecer un ancho, posicionándolo.
Si vas por la ruta de bloque en línea, dale una lectura ... es posible que termines peleando algunas batallas inesperadas con tus expectativas de CSS.
http://www.brunildo.org/test/InlineBlockLayout.html (enlace que se encuentra cerca de la parte inferior de la siguiente página de MSDN) http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx
uhh..what da? – Dawson
Para aquellos de ustedes que todavía están llegando a través de este tema, hoy en día se puede manejar esto con:
<div>
<div style="display: table; margin: auto">
This will expand only as far as it needs to
</div>
</div>
Aquí es un nuevo violín basado en la respuesta aceptada: http://jsfiddle.net/j33qL8pa/1/
Creo que esto funciona hoy en día:
.center
{
width: fit-content;
margin-left: auto;
margin-right: auto;
}
http://caniuse.com/#search=fit-content –
hmm ... que establece el ancho correctamente, pero los márgenes no centran el div ahora. – Justin808
bien, por eso dije que tendrías que agregar text-align: center al contenedor div. – jessegavin
Supongo que puedo agregar otra envoltura para el 'text-align' pero, si es posible, preferiría no tener que agregar otro nivel de anidación. ¿Conoces alguna otra forma de centrar un div de ancho desconocido? – Justin808