Ver Mensaje Individual
  #9 (permalink)  
Antiguo 05/02/2011, 23:10
gcrlink
 
Fecha de Ingreso: enero-2011
Ubicación: Cali
Mensajes: 73
Antigüedad: 13 años, 2 meses
Puntos: 2
Respuesta: Centrado de página con css

Hola MMM_240...

La respuesta de Jm Rosón B es completa y muy válida. Por lo menos a mí de la forma que él explica no me falla la centralización vertical ni horzontal de la capa o división contenedora de todos los objetos en el documento. Entiéndase la solución que proporciona:

Código CSS:
Ver original
  1. #contenedor {
  2. POSITION: relative;
  3. WIDTH: 800px;
  4. MIN-HEIGHT: 500px;
  5. MARGIN-LEFT: auto;
  6. MARGIN-RIGHT: auto;
  7. CLEAR: both;
  8. BACKGROUND: #000;
  9. }


Pero si quieres experimentar otra manera de hacerlo, puede ser de la siguiente manera con la ayuda de css + javascript:

Creas un div o capa contenedora con las siguientes especificaciones de estilo:

Código HTML:
Ver original
  1. <div id="bodycopy">
  2.  
  3. <!-- CONTENIDO DE TU PÁGINA -->
  4.  
  5. </div>

Luego la dotas de estilo ya sea en un (.css) o en la cabecera de tu hoja html como muestra el ejemplo siguiente:

Código CSS:
Ver original
  1. <style type="text/css">
  2. <!--
  3. #bodycopy
  4. {
  5. float: left; /* TAMBIÉN PUEDE SER margin: 0px auto; */
  6. width: 800px; /* PUEDE SER TAMBIÉN DE 1000PX */
  7. min-height: 600px;
  8. background: #ffffff;
  9. }
  10. -->
  11. </style>

Luego en la cabecera de tu documento html, entre las etiquetas <head></head> escribes el siguiente código:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. function autoMargin()
  4. {
  5. var ancho = screen.width;
  6. var pos = (ancho - 800)/2; // 800 es igual al width de la capa que quieres centralizar
  7.  
  8. document.getElementById('bodycopy').style.marginLeft = pos;
  9. }
  10. // -->
  11. </script>

Este método me sirve para FF, Crome, IE, Opera y Safari, y tampoco he tenido ningún tipo de problemas con el mismo.