Centrar horizontal y verticalmente una tabla en la ventana del navegador.

Estoy diseñando una página Web y no encuentro la manera de centrar una tabla tanto en la vertical como en la horizontal. ¿Cómo puedo hacerlo?


En primer lugar insertamos una primera tabla sin bordes, que tenga una sola fila y una sola columna.
El relleno y el espaciado entre celdas ha de ser cero.
El ancho de la tabla debe ser 100%, para que ocupe toda la ventana del navegador.



Una vez insertada la tabla, modificamos también el alto de la misma al 100% desde las propiedades de tabla. Cambiamos la opción Alinear a Centro.

Ahora nos situamos en la única celda de la tabla y aplicamos una alineación Horizontal Centro y Vertical Medio:

Insertamos la tabla que queremos mostrar dentro de dicha celda.

Aplicamos a esta segunda tabla el ancho deseado, que nunca ha de sobrepasar el 100%, para evitar el scroll horizontal.

En nuestro ejemplo creamos una tabla con 3 filas y dos columnas, un ancho del 75%, un borde de 1 px y color de fondo verde:


Aunque redimensionemos la ventana del navegador, nuestra tabla siempre se mantendrá en el centro de la misma:

Este truco de crear una primera tabla sin bordes con un 100% de alto y de ancho con una sola celda, sirve para centrar cualquier elemento en la pantalla, como por ejemplo una imagen.


4 comentarios:

Esferobite - DSK dijo...

¡¡¡¡Que bueno!!!!!
Realmente ingenioso. llevaba varias horas peleándome con soluciones mucho más complejas.

Sólo me falta probarlo con IE7

Gracias

Claudia Castellano dijo...

No sabes la alegría que nos das. Muchas gracias por tu comentario.

Anónimo dijo...

estuve buscando y esta es la mejor solución por LEJOS... felicitaciones y muchas gracias... de verdad.

Aladino dijo...

Muchas gracias a ti por tu comentario alejandro m.c. No sabes la alegría que nos das.

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Top WordPress Themes