Centrar un div horizontal en Internet Explorer y navegadores actuales

Una de las tareas más comunes al momento de programar o diseñar aplicaciones web es el de centrar el contenido para que este se vea más agradable a la vista, sin embargo una tarea tan sencilla puede complicarse cuando se busca una correcta visibilidad en todos los navegadores posibles, ya sea el afamado Chrome, el siempre confiable Firefox o hasta la oveja negra de Internet Explorer.

Quizá muchos de ustedes aún utilicen tablas para la maquetación de sus diseños, sin embargo esta practica es cada vez menos utilizada por la complejidad de mantenimiento y por el uso de nuevas tecnologías web como es el caso de CSS (Hojas de estilo en cascada).

Pues bien, vamos a suponer que tenemos algo como esto:

<html>
<head>
      <title>Pagina centrada </title>
</head>
<body>
     <div>Esto es lo que vamos a centrar </div>
</body>
</html>

Es una estructura simple de una página web, lo que vamos a centrar se encuentra en el “div”, para centrarlo en la mayoría de los navegadores modernos lo podemos hacer con estilos CSS, para ello agregamos el estilo a nuestra página web entre las etiquetas <head> y </head>

<link rel="stylesheet" type="text/css" href="estilo.css" />

 

Donde “estilo.css” será nuestra hoja de estilos donde definiremos lo siguiente:

#contenido{
    width: 800px; // Aquí puedes definir el ancho que quieras
    margin-left:auto;
    margin-right:auto;
}

Con esto solo faltaría agregar el estilo a nuestro div, cambiando esto:

<div>Esto es lo que vamos a centrar </div>

Por esto:

<div id="contenido">Esto es lo que vamos a centrar </div>

Guardando nuestros archivos y abriendo nuestro archivo HTML en cualquier navegador actual debe quedar nuestro contenido centrado, y todo lo que pongamos dentro del div que creamos se centrará también horizontalmente a la página, desde texto hasta imágenes.

El problema radica cuando queremos que esto funcione también para Internet Explorer en sus versiones más antiguas (6 , 7 , 8… ) y esto es porque es un navegador que no respeta los estándares correctamente. por lo tanto tendremos que hacer un pequeño “hack” para hacer que funcione también con este navegador.

Tendremos que cambiar nuestro archivo de “estilos.css” por algo como esto:

body{
  text-align:center; // Este es el hack para hacer que Internet Explorer centre el contenido del div
}
#contenido{
  text-align:left; // Regresamos el texto a la izquierda para que el contenido quede centrado pero el texto alineado a la izquierda. 
  width: 800px; // Aquí puedes definir el ancho que quieras
  margin-left:auto;
  margin-right:auto;
}

Es un pequeño paso más para que nuestra página sea compatible con los navegadores actuales y con IE, pero con esto tendremos centrado nuestro contenido sin necesidad de utilizar las obsoletas tablas para maquetar.

Espero les haya sido útil y entendible la explicación.

5 comentarios

  1. No ma!..deveras te pasase con este truco para engañar a los navegadores…es el unico que me ha funcionado, algunos me funcionaban en Chrome y Mozilla pero en el puto de IE, no…te lo agradezco man. lo probe en Google Chrome v13, Internet Explorer 8, y Mozilla Firefox 6…excelente !

  2. Hola,

    Yo necesito centrar el contenido de todo el body, no de un simple div, en ningun lado encuentro una respuesta correcta o algo q funcione para mi codigo, tienes alguna idea de como puedo centrar todo el contenido del body?

    Tengo muchos div con style=”position:absolute” por ende no tengo un div principal que centrar..

    el body { text-align: center; } solo me centra el texto de unas tablas, pero el resto del contenido no se ve afectado.

    Gracias para quien me socorra 😀

  3. Pingback: software almacen

¿Algo que decir? ¡Comentalo!