2012-06-03 23 views
24

Estoy tratando de centrar el elemento del cuerpo en mi página HTML.¿Cómo centrar el cuerpo en una página?

enter image description here

Básicamente, en el CSS fijo el elemento del cuerpo para ser display: inline-block; por lo que sólo es tan amplia como su contenido. Eso funciona bien Sin embargo, margin: 0px auto; no lo centra en la página.

¿Alguien sabe cómo solucionar esto? Quiero que el gran cuadrado azul se centre en la página, no que flote hacia la izquierda como lo está ahora.

Aquí es mi CSS:

body { 
    display: inline-block; 
    margin: 0px auto; 
    text-align: center; 
} 
+0

¿Deberían esas otras cajas no estar dentro del cuerpo? – barro32

+1

Sugeriría _no_ centralizar 'cuerpo', de hecho, hacer un' div' centrado – Asif

+0

nunca debe centrar el cuerpo. eche un vistazo a freecsstemplates.com --- usted los diseñadores siempre usan divs – Yang

Respuesta

24

también se aplican text-align: center; en el elemento html así:

html { 
    text-align: center; 
} 

Un mejor enfoque, aunque es tener un div interior de contenedores, que será centralizada, y no el cuerpo.

+0

Esto es exactamente lo que se solicitó, ¿por qué se baja la votación? http://jsfiddle.net/gA9La/2/ – barro32

+0

Esto funciona perfectamente. Gracias. –

+0

He editado mi respuesta. Ver el mejor enfoque. –

8

Debe especificar el ancho del cuerpo para que se centre en la página.

Or put all the content in the div and center it.

<body> 
    <div> 
    jhfgdfjh 
    </div> 
</body>​ 

div { 
    margin: 0px auto; 
    width:400px; 
} 

+0

Hmm ... pensé que este podría haber sido el caso pero ... ¿y si no sé el tamaño por adelantado? –

+1

Luego use un porcentaje –

+0

Intenté establecer el ancho y usar un porcentaje, pero ninguno de ellos centró el cuerpo. –

27
body 
    { 
     width:80%; 
     margin-left:auto; 
     margin-right:auto; 
    } 

Esto funcionará en la mayoría de los navegadores, incluyendo IE.

+0

Sí, me gusta esto. No quería que el cuerpo tuviera un ancho fijo. –

2

Para aquellos que hacer conocer el ancho, que podría hacer algo como

div { 
    max-width: ???px; //px,% 
    margin-left:auto; 
    margin-right:auto; 
} 

También estoy de acuerdo en no establecer text-align: Centro en el cuerpo, ya que puede estropear el resto de su código y es posible que tenga que establecer individualmente text-align: dejó en muchas cosas en ese momento o en el futuro.

Cuestiones relacionadas