div con un ancho desconocido

he div <div id="container"></div> que contiene todo el contenido de la página que incluye la cabecera de pie de página, etc.div con un ancho desconocido

Así que me gustaría centrar este div para el centro de mi página, ahora tengo este CSS:

#page{ 
position:relative; 
margin:auto; 
width:1000px; 
}

Y funciona, pero mi problema es que el contenido en este div cambia constantemente por lo que los cambios de ancho también, puede ser 1000px o 10100px así que necesito algo así como width:auto;, ¿cómo se puede hacer algo así?

Fuente

2011-11-22 Linas

Qué quiere decir: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen? –

@Michael No creo que esté teniendo problemas con el centrado (título confuso en este caso). Si lees la pregunta, está teniendo problemas con el ancho del contenido. – jadarnel27

¿Estás preguntando cómo centrar horizontalmente un elemento con un ancho desconocido? – thirtydot

Ver:http://jsfiddle.net/thirtydot/rjY7F/

HTML :

<div id="container"> 
    i'm as wide as my content 
</div>

CSS:

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
    border: 1px solid red; 
    display: inline-block; 
    /* for ie6/7: */ 
    *display: inline; 
    zoom: 1; 
}

Fuente

2011-11-22 14:47:43 thirtydot

gracias funciona perfectamente – Linas

Brillante. Gracias. –

Acabo de editar su jsfiddle y he eliminado todo el estilo de '# container' y todavía funciona. Supongo que el 'text-align' en' body' hace el truco? Probado en firefox –

¿qué tal esto?

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
}

Suponiendo <body><div id="container"></div></body>

Fuente

2011-11-22 14:42:18 PiTheNumber

Una forma es crear una envoltura alrededor de su elemento #page, vamos a llamarlo #wrapper:

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

Esto permitirá que el #page div siga siendo una anchura variable.

Fuente

2011-11-22 14:45:24

mejor solución aquí imo – Tunarock

Esto le dará un div dinámicamente de tamaño que se queda en el centro del cuerpo y es el tamaño más pequeño sea necesario para adaptarse al contenido:

body { text-align: center; } 
div.container { display: inline-block; text-align: left; }

Fuente

2011-11-22 14:47:04 Viruzzo

Respuesta

Cuestiones relacionadas