centrar body

SidP · #1 (**permalink**) 08/05/2006, 00:03

Hola comunidad
Ahora me estoy metiendo en el mundo de las famosas CSS, de seguro lo han respondido millones de veces pero utilice el buscador y no lo encontre, mi problema es el sigte
Como podria centrar toda mi pagina, porque ahora le he puesto la resolucion 800x600 y me sale a laizquierda completamente

Código HTML:

body {
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:10pt;
	color:black;
	margin:0px 0px 0px 0px;
	width:800px;
	height:600px;
	padding:0px;
	background-image: url('background.gif');
   }

Gracias de antemano

#2 (**permalink**) 08/05/2006, 13:43

la forma de centrar cualquier elemento es:
1.- definirle el ancho
2.- definirle márgenes laterales iguales, por lo general se hace con "auto".

Además, siempre es bueno ponerle al body margin : 0; y padding: 0, ya que algunos navegadores le dan por defecto un margen y otros le ponen padding....

Una vez hecho eso, lo centrás como te mencioné arriba, por lo que quedaría:

body {
width : lo que sea;
margin-left : auto;
margin-right : auto;
padding : 0px;
}

Saludos.

Developer9 · #3 (**permalink**) 08/05/2006, 14:22

Oigan disculpen que me entrometa en el tema que no es mio pero...

de donde sacaste el body, yo tengo un css que tiene body

SidP · #4 (**permalink**) 08/05/2006, 14:36

Saludos Alvlin
guiandome por lo que me dijiste se lo he puesto a mi body pero ni modo, no me funciona, me sigue saliendo la pagina totalmente a la izquierda y no en el centro como deseo

Código:

body {
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:10pt;
	margin-left:auto;
	margin-right:auto;
	width:800px;
	padding:0px;
       	margin:0px 0px 0px 0px;
        color:gray;
	background-image: url('background.gif');
   }

estoy probando las paginas con IE6 y Opera
que podria estar haciendo mal???

Gracias de antemano

SidP · #5 (**permalink**) 08/05/2006, 14:38

no entiendo tu pregunta Developer9

Sal2

Developer9 · #6 (**permalink**) 08/05/2006, 14:41

Que tengo un archivo css y no tiene body

:

si tuviera body pudiera probar lo posteado en este tema

Mickel · #7 (**permalink**) 08/05/2006, 15:15

agregale tu mismo esos datos al archivo css

SidP · #8 (**permalink**) 08/05/2006, 15:21

Bueno problema resuelto, al fin pude centrar la pagina, el problema era que estaba utilizando ademas de el estilo que le di al body, estaba utilizando este (los 2 a la vez

)

Código:

#align{
    border: 1px black solid;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:0px;
	
	}

y en el estilo del body le elimine esta la linea del width:800px; y funcionó.
Gracias a todos
Sal2

Developer9 · #9 (**permalink**) 08/05/2006, 15:40

y el auto para que sirve?

Hououji Ayumu · #10 (**permalink**) 09/05/2006, 18:21

bien pues yo lo que hago para centrar el documento sin tantos problemas es esto asta el momento me ah servido muxo
<html>
<head>
<title>CLAMP molde</title>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>
<body>
<center>
<div id="all">
contenidos
</div>
</center>
<body>
<html>
y listo asunto arreglado bueno ami si me ah funcionado asi que lo pongo para ver si les sirve

Mickel · #11 (**permalink**) 09/05/2006, 18:27

se supone que no deberias usar <center>...

Jesusguevarautomotri · #12 (**permalink**) 09/05/2006, 18:55

Cita:

Iniciado por Mickel

se supone que no deberias usar <center>...

Pero tu lo usaste en: http://www.mickel.biz/centering.html Yo me estaba guiando por tu ejemplo y luego me dijeron que estaba mal, pienso que deberias hacer una enmienda.

#13 (**permalink**) 09/05/2006, 19:03

Recuperando el tema inicial:
SidP, tu css no funcionaba porque te contradecís:

Código:

body {
 margin-left : auto;
 margin-right : auto;
 margin:0px 0px 0px 0px;
 }

primero le decís que el margen se ajuste y después le decís que sea 0.....

sería mejor (y con el efecto deseado) dejar esas 3 líneas como:

Código:

body {
 margin : 0px;
 margin-left : auto;
 margin-right : auto;
 }

Por otro lado, Developer9, el valor de auto sirve para que el margen se ajuste automáticamente, la gracia de ponerle auto al margen derecho y al izquierdo es que se van a ajustar y van a quedar iguales, con lo que el elemento queda centrado (si tiene un ancho definido)

Y finalmente, Jesusguevarautomotri:
El elemento center fue desaprobado ya hace varios años, si bien puede seguir usándose sin problemas, la idea es sustituir todos los elementos que sean puramente estéticos (center, font, b, i, sub, sup, y muchos otros) por css. (bueno, en el caso de 'b' lo sustituye 'strong' y a 'i' lo sustituye 'em')

Saludos.

Hououji Ayumu · #14 (**permalink**) 09/05/2006, 19:09

mmm...

cito "Yo me estaba guiando por tu ejemplo y luego me dijeron que estaba mal"
pues la verdad no se porque te digan que esta mal ponerle <center> ya que yo lo eh usado asi y pues sip me funciona muy bien si quieres puedes ver la pagina donde lo use asi, (devo aclarar que es la primera page que hice con CSS)

http://mx.geocities.com/hououji_b/

aunque de cualquier manera si me estoy interesando por centrar con CSS eso de poner <center> es simplemente para que la pagina se vea sentrada cuando los visitantes tengan pantalla superior a 800 x 600 asi cada ves que entre alguien con pantalla superior a 800 x 600 pues la page queda centrada

Mickel · #15 (**permalink**) 09/05/2006, 19:12

Cita:

Iniciado por Jesusguevarautomotri

Pero tu lo usaste en: http://www.mickel.biz/centering.html Yo me estaba guiando por tu ejemplo y luego me dijeron que estaba mal, pienso que deberias hacer una enmienda.

Pues...

si... tengo que hacer una enmienda...

Gracias por aclararlo. Eso significa que al menos alguien leyo el articulo...

Jesusguevarautomotri · #16 (**permalink**) 09/05/2006, 19:36

Pues yo lo lei y me sirvio de mucho, contigo entendi y empece a usar CCS. Espero mas articulos tuyos, y me gustaria ver esa misma pagina centrada sin <CENTER>

kallel20 · #17 (**permalink**) 05/06/2008, 13:31

Espero que os sirva, aunque el post tenga mucho tiempo...

centrar body sin usar <center>.

Código HTML:

Código:

 ...
<body>
       <div id="contenedor">

       </div>
</body>
</html>

Código CSS:

Código:

/*centramos todo el contenido del body*/
body{width:100%; text-align:center;}

/*volvemos a colocar todo a la izquierda*/
#contenedor{width:800px; height:600px; margin:auto; text-align:left;}

yo recomiendo usar un min-height:600px para que crezca si necesita crecer y en la hoja de estilos de IE6, usar height:600px (que hace lo mismo que min-height), pero para gustos los colores

Espero que os sirva. Un saludo