Centrar vertical y horizontalmente mi sitio web

forelord · #1 (**permalink**) 08/08/2008, 00:33

Hola, tengo una web que no se bien como centrarla vertical y horizontalmente. ¿Alguien podría decirme cómo puedo hacerlo?

Un saludo.

otto1303 · #2 (**permalink**) 09/08/2008, 21:22

Horizontalmente lo hago así con CSS, creando un div que abarque todo llamado contenedor:

Código:

#contenedor {
	margin: 0px auto;
}

Con la observación de que en Firefox, Opera, Safari funciona bien, pero en IExplorer 7 no me funciona. Allí utilizo

Código:

<div align="center">todo el contenido</div>

que aunque no es correcto hacerlo con align, me funciona.

Verticalmente es más complicado y quizás algúna otra persona nos ayuda.

ssclamp · #3 (**permalink**) 10/08/2008, 17:34

Coloca todo el contenido de tu web dentro del divisor contenedor y te saldrá totalmente centrado, tanto en el ancho como en el alto, independientemente de la resolución del monitor:

El ejemplo tiene como referencia una medidas de 900px X 500px (esto lo ajustas a tus medidas)

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Centramiento horizontal y vertical</title> 
 
<style type="text/css"> 
#contenedor { 
    position:absolute; 
    width:900px; 
    height:500px; 
    margin-left: -450px; 
    margin-top: -250px; 
    left: 50%; 
    top: 50%; 
    border: 1px solid #484848; 
</style> 
</head> 
 
<body> 
<div id="contenedor"> 
Contenido de tu página 
</div> 
 
</body> 
 
</html>

Saludos

forelord · #4 (**permalink**) 11/08/2008, 03:00

Muchas gracias por la ayuda, esta tarde lo probaré a ver qué tal. Ya os contaré.

forelord · #5 (**permalink**) 11/08/2008, 11:47

Lo primero de todo decir que no tengo mucha idea de diseño web. Segundo comentaros que he hecho lo que me has dicho y la página aparece con una línea cuadrada alrededor de mi web. ¿Cómo la puedo quitar?

Otra cosa, mi página tiene una parte de css en donde definí a través de Dreamweaver el estilo de letra, fondo y color de los enlaces.... ¿Tengo que meter todo el contenido inlcuido estos estilos dentro de la parte que me dices?

Espero vuestra ayuda.

Saludos.

ssclamp · #6 (**permalink**) 11/08/2008, 17:54

Hola

La linea que remarca el divisor es sólo para vieras el efecto de centramiento tanto horizontal como vertical. Para quitar la linea borra esto del estilo:

border: 1px solid #484848;

y ya desaparecerá el recuadro.

Respecto a meter tu contenido dentro del divisor de centramiento, sólo debes incluir el contenido del body. El contenido del head lo metes dentro del head de la página que hace el centramiento.

¿resuelto?.

Coméntanos.

Saludos

forelord · #7 (**permalink**) 12/08/2008, 14:43

Gracias! Pero lo que no consigo es poner el color del fondo de mi web. Al centrarlo solo aparece el color del fondo en el espacio que he creado, pero el resto de la pantalla tiene un color de fondo blanco que no es el mismo que el que tenía mi web.

¿Cómo podría solucionar ésto?

Triby · #8 (**permalink**) 12/08/2008, 17:29

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Centramiento horizontal y vertical</title> 
 
<style type="text/css"> 
body { 
        background-color: #000; 
} 
 
#contenedor { 
    position:absolute; 
    width:900px; 
    height:500px; 
    margin-left: -450px; 
    margin-top: -250px; 
    left: 50%; 
    top: 50%; 
    border: 1px solid #484848; 
</style> 
</head> 
 
<body> 
<div id="contenedor"> 
Contenido de tu página 
</div> 
 
</body> 
 
</html>

Sólo agrega el estilo correspondiente a body y especifica el color de tu preferencia.

ssclamp · #9 (**permalink**) 12/08/2008, 17:45

Exactamente tal como dice Triby.

Saludos

forelord · #10 (**permalink**) 13/08/2008, 14:01

Muchas gracias a los 2. Todo ha ido perfecto y ya tengo mi web como quería.