You are on page 1of 4

Centrar el contenido de una pgina en la pantalla es fcil de hacer

utilizando tablas, pero sin ellas, es decir, usando CSS , la cosa es un poco
misteriosa, sin embargo esta ultima opcion es la ms elegante. El cdigo es
el siguiente.
< HTML >
<head>
<style type="text/css">
body{
text-align:center;
margin:0 auto;
}
contenedor{
margin: 0 auto;
text-align:le!t;
"idth:#0$;
}
</style>
</head>
<body>
<di% id="contenedor">
el contenido de tu p&gina ac&
</di%>
</body>
</'()*>
El DIV contenedor es necesario para alinear el texto nueamente a la
iz!uierda, "a !ue en por la regla !ue dimos al bod", el texto !ueda
centrado.
Creamos un div que englobar a todos los elementos de la pgina y le damos un tamao,
hasta aqui todo bien, pero ahora viene la mgia.
En el CSS debemos darle las siguiente propiedades al body y al contenedor.
body{text-align:center}
#cont{width:790px;margin-left:auto;margin-right:auto;text-align:left}}
Siendo #cont el contenedor de todo y pones el text-alignle!t para que el contendor no
herede el text-aligncenter del body.
Crear pgina centrada sin usar tablas con CSS
La actual direccin del desarrollo web, es dejar de usar las tablas para crear la
estructura de la pgina. Las tablas son tediosas, "difciles" de usar, es complicado dejar
cada cosa en su lugar, muy complicado de mantenerlas, se va creando un cori!o de
tablas, tablas una de otras dentro de otras y dentro de otras, nos acen recordar a toda
la familia "#... en $n...
#as pginas ahora se ma!uetan con dis, listas " principalmente con CSS, es ms, "a ha"
pro"ectos !ue ma!uetan todo el sitio solamente con listas " CSS.
Claro !ue esto llea a !ue uno aprenda a programar con ho$as de estilo, pero realmente ale la
pena hacerlo. #os sitios !uedan ms claros, fciles de mantener, se indexan me$or a los
buscadores %m&" util si !ueremos posicionarnos en 'oogle(.
)ara empezar amos a er cmo crear una pagina *clsica*, o sea, !ue contenga una cabecera, un
men&, el contenido " un pie, " a la ez !ue !uede centrada " sea compatible con IE " +irefox.
)rimero debemos crear nuestra estructura html de la siguiente manera,
-.D/C01)E 203# )45#IC *67789C77D0D 203# :.;< 0ransitional77E=*>
-html>
-head>
-title>)rueba-7title>
-7head>
-bod">
-di id?*content*>
-di id?*cabecera*>-7di>
-di id?*menu*>-7di>
-di id?*contenido*>-7di>
-di id?*pie*>-7di>
-7di>
-7bod">
-7html>
Como emos en el cdigo de arriba, tenemos una capa *content* !ue a a contener toda la
informacin. Dentro de ella se encuentran otras capas *cabecera*, *menu*, *contenido, *pie*. Cada
una de estas capas las iremos posicionando dentro de *content* para lograr nuestra meta. Como
dentro *content* est *todo*, con solo centrar esta capa, se centrar toda la informacin de
nuestro sitio.
El CSS !ue logra hacer esto es el siguiente,
-st"le>
bod" @
margin,;A
padding,;A
text6align,centerA
B
Ccontent @
text6align,leftA
margin,autoA
bacDground6color,CE;A
Fidth,G;;pxA
height,G;;pxA
B
Ccabecera @
Fidth, G;;pxA
height,<;;pxA
bacDground6color,Cf;;A
B
Cmenu @
Fidth,<H;pxA
height,IH;pxA
Joat,leftA
bacDground6color,CGGGA
B
Ccontenido @
Fidth,IH;pxA
height,IH;pxA
Joat,leftA
bacDground6color,CcccA
B
Cpie @
clear,bothA
Fidth,G;;pxA
height,H;pxA
bacDground6color,C;f;A
B
-7st"le>
1 listo, !ued la estructura de nuestro sitio armada.
Tutorial CSS: Centrar una capa en la ventana
Uno de los problemas ms frecuentes a la hora de disear una pgina web con estndares
vlidos es el centrado de capas. Algunos utilizan una tabla (con una sola celda) que ocupa el
ancho y el alto total de la pgina y adems tiene el alineado al centro tanto vertical como
horizontal (en la misma celda)!
<table border="0" cellspacing="0" cellpadding="0" "idth="+00$"
height="+00$"><tr>
<td %align="middle"
align="center">,-ontenido.</td>
</tr></table>
"sto funciona en la mayor#a de navegadores dependiendo del tipo de documento utilizado
pero no es un estndar vlido. "n la versi$n %&'() *.+ estricta (,-./0'12" html 2U3)40
567789077.'. %&'() *.+ :trict77";5 5http!77www.w9.org7'<7=++=7<"06>html*6
=++=+?+*7.'.7>html*6strict.dtd5@) a parte de no ser vlido no funciona lo que frusta a los
que intentamos disear web vlidas de forma estricta.
2uAs bien hay una soluci$n a este problema salvable mediante hoBas de estilo en cascada
(0:: 0ascade :tyle :heet). :implemente necesitamos una capa (div) con medidas ancho y
alto par (puesto que despuAs necesitaremos dividirla a la mitad y si es impar puede que no
quede centrada de forma absoluta) y el siguiente c$digo en la hoBa de estilos!
/capa-centrada {
position: absolute;
width: 000px; /* ancho de la capa a centrar */
height: 100px; /* alto de la capa a centrar */
top: 20$;
left: 20$;
margin-left: -100px; /* mitad del ancho de la capa a centrar */
margin-top: -+00px; /* mitad del alto de la capa a centrar */
}
Una vez resuelto esto s$lo quedar centrar la capa simplemente agregndole el estilo que
hemos creado. "sto lo haremos por eBemplo as#!
<di% class="capa-centrada">,-ontenido.</di%>
As# esta capa quedar centrada de forma absoluta en la ventana.
:aludos