Center Div dentro de otro (100% de ancho) div

Aquí hay un problema "simple" y no estoy seguro de por qué es tan complicado.Center Div dentro de otro (100% de ancho) div

Tienen un tamaño del 100% (ancho) div.
tener otro div posicionado en el centro de este div (tamaño 940px ancho)

¿Alguna idea? :)

Fuente

2009-09-14 Shadi Almosri

posible duplicado de [¿Cómo centrar DIV en DIV?] (Http://stackoverflow.com/questions/114543/how-to-center-div-in-div) – slugster

.parent { text-align: center; } 
.parent > .child { margin: 0 auto; width: 900px; }

Fuente

2009-09-14 20:13:07 geowa4

Me faltaba el texto-alinear parece ya que tenía el margen y no estaba funcionando. Aceptado, salud. –

text-align: center no ayuda a centrar el div interno. – Vizjerai

centra las cosas (texto) dentro, sin embargo, dando como resultado el mismo resultado deseado (si solo tiene texto). para que el margen automático funcione, también necesita un ancho en el div interno. – geowa4

El estilo de abajo al div interior lo centrará.

margin: 0 auto;

Fuente

2009-09-14 20:12:53

Sólo tiene que añadir a la margin: 0 auto; div interior.

Fuente

2009-09-14 20:13:36 ScottE

La clave es margin: 0 auto; en el div interno. Un ejemplo de prueba de concepto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<body> 
    <div style="background-color: blue; width: 100%;"> 
     <div style="background-color: yellow; width: 940px; margin: 0 auto;"> 
      Test 
     </div> 
    </div> 
</body> 
</html>

Fuente

2009-09-14 20:15:28 Larsenal

Esta es una buena respuesta, ya que es crucial tener el tipo de documento correcto si está utilizando el margen: 0 auto technique – ScottE

de información de detalle, digamos por debajo del código hará un div alineada al centro:

margin-left: auto; 
margin-right: auto;

o simplemente utilizar:

margin: 0 auto;

pero tenga en cuenta que el código CSS anterior solo funciona cuando especifica un ancho fijo (no 100%) en su elemento html. por lo que la solución completa para el problema sería:

.your-inner-div { 
     margin: 0 auto; 
     width: 900px; 
}

Fuente

2009-09-14 21:01:19 Khashayar

Este es un gran ejemplo porque usted señala explícitamente que se requiere un ancho en el div interno. –

.outerdiv { 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
}

no funciona en Internet Explorer 7 ... pero a quién le importa?

Fuente

2011-10-14 18:34:03 DeFliGra

Center Div dentro de otro (100% de ancho) div

Respuesta

Cuestiones relacionadas