Iguazoft

Centrar una tabla dentro de un DIV

Hace poco me paso, no suelo manejar muchas tablas  con divs, solo para lo necesario.

Coloque un div , dentro una tabla que tenia la propiedad de centrado, y no centraba!

intente colocarle text.align: center; al DIV.. y nada pasaba!

 

Aca la solución, muy simple:

<div class=’centerTable’>

 

<table>
//Acá el contenido de la tabla….
</table>

 

</div>

 

Nuestros CSS quedarían de la siguiente manera:

 

div.centerTable{
        text-align: center;
}

 

div.centerTable table {
       margin: 0 auto;
       text-align: left;
}

 

Eso era todo!

:@memo_ac   :imageac

25 respuestas a «Centrar una tabla dentro de un DIV»

  1. Avatar de Andres Taborda
    Andres Taborda

    Por fin una solucion simple y que funciona!
    Gracias

    Responder
    1. Avatar de Guillermo Aguilar Cruz
      Guillermo Aguilar Cruz

      De nada, me alegro que te haya servido. Saludos!

      Responder
  2. Avatar de Pedro. w Fuentes
    Pedro. w Fuentes

    Excelente truco… que sencillo, también encontré por fin la solución… gracias por ese aporte, muy bueno.

    Responder
    1. Avatar de Guillermo Aguilar Cruz
      Guillermo Aguilar Cruz

      De nada!, yo también estaba cansado de buscar soluciones alternativas, hasta que me resulto esta.

      Responder
  3. Avatar de Daniel
    Daniel

    Gracias.

    Responder
  4. Avatar de Santiago García
    Santiago García

    +10

    Responder
  5. Avatar de Emanuel
    Emanuel

    Buenas tardes gente!! no logro centrar una planilla CSS, me estoy volviendo loco, y de esto depende mi publicación de Base de datos, si alguien me puede ayudar estaria muy agradecido, desde ya intente todos los trucos, incluyendo este. Sin Gloria.

    Responder
    1. Avatar de Guillermo Aguilar Cruz
      Guillermo Aguilar Cruz

      podrias darnos un ejemplo de tu codigo?

      Responder
      1. Avatar de Emanuel
        Emanuel

        Gracias Guillermo por responder tan pronto a mi consulta, el tema es el Siguiente estoy usando Filemaker xxx para mi base de datos laboral, tengo montado un servidor que corre perfecto dicha base, y se puede hacer la consulta de un navegador, el tema radica en que la maquetacion de la base esta hecha para una resolución 1024×768, cuando la visualizo en diferentes resoluciones siempre figura a la izquierda y arriba, esto es un problema del Programa a la hora de hacer Publicación Web, pero el programa deja abierto, un archivo html para personalizarlo, cosa que hice, una vez que ingreso con mi pass, todo esta a la izquierda y arriba, me seguí metiendo en el tema hasta llegar a los famosas planillas CSS, de las cuales no entiendo y perdón por la palabra un pedo. necesito que alguien pueda ver o inspeccionar y decirme como centrar las tablas o las planillas css. Se que me fui de mambo, pero hace tiempo que estoy con este tema, y agradecería en serio la ayuda.

        este es el codigo de iwp.home.css esta relacionado con el archivo html que decia anteriormente. iwp.home.htm

        /* copyright: (C) Copyright 2003-2010 FileMaker, Inc. All Rights Reserved */
        .databasehomepage { color: #CCCCCC; font-style: normal; font-size: 16px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
        .bannerWhite { color: #CCCCCC; font-size: 28px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; letter-spacing: -.5px }
        .links { color: #3333CC; font-size: 16px; font-family: «Times New Roman», Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
        #relativeBannerBox { position: relative; left:0; top:0; width: 100%; height: 60px; visibility: visible; display: block; overflow:hidden;}
        #bannerBox { background-color: #000000; position: absolute; left:0; top:0; width: 100%; height: 65px; visibility: visible; display: block; overflow:hidden;}
        #fmBox { text-align: right; position: relative; top: 20px; left: 0px; width: 100%; height: 35px; visibility: visible; display: block }
        #homeBox { text-align: right; vertical-align: bottom; position: absolute; top: 40px; left: 0px; width: 100%; height: 25px; visibility: visible; display: block }
        #iwpBottomBox { position: absolute; top: 17px; left: 17px; width: 550px; height: 40px; visibility: visible; display: block }
        #iwpTopBox { position: absolute; top: 15px; left: 80px; width: 550px; height: 40px; visibility: visible; display: block }
        #linksBox { position: relative; left: 15px; right: -15px; height: 100%; visibility: visible; display: block; }
        A { color: #3333CC; font-size: 16px; font-family: «Times New Roman», Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
        .db { vertical-align:text-bottom; }

        Responder
        1. Avatar de Guillermo Aguilar Cruz
          Guillermo Aguilar Cruz

          A simple vista no podria decirte, este es el unico archivo css que tiene?
          Podrias inspeccionar con Firebug, en firefox o si estas en chrome clic derecho inpeccionar elemento.
          Abajo aparece una lupa, dale clic y ubica el elemento que quieres centrar.
          una vez ubicado al lado derecho te apareceran las propiedades css que tiene para que este alineado a la izquierda y arriba. ese elemento es el que deberiamos modificar el css para centrarlo.

          Una solucion es si tienes un div con un ancho especifico, ejemplo 300 de ancho. Para centrar este div horizontalmente se necesitaria:

          position: relative;
          width: 300px;
          left: 50%;
          margin-left: -150px;

          el margin-left siempre tiene que ser negativo, y es la mitad del ancho, en este caso 300

          Responder
  6. Avatar de Eli Cordero
    Eli Cordero

    Exelente me funciono !! yo tambien lo intente con el aling center dentro del div y nada !! MUCHAS GRACIAS!!

    Responder
  7. Avatar de lizethrebollar
    lizethrebollar

    De verdad muchas gracias!! No me explicaba por que no podía alinearla!! 😉

    Responder
    1. Avatar de Guillermo Aguilar Cruz
      Guillermo Aguilar Cruz

      De nada, me encanta saber que puedo colaborar!, Saludos!

      Responder
  8. Avatar de HENRY
    HENRY

    Parece increíble pero, así de sencillo era. Pero antes de esto me encontré cantidad de cosas enredadas y complicadas.

    Muchas gracias.

    Responder
    1. Avatar de Guillermo Aguilar Cruz
      Guillermo Aguilar Cruz

      De nada, gracias por visitar nuestro blog!

      Responder
  9. Avatar de Jay
    Jay

    Genial!!!!! me ayudo mucho, ya solo utilizr la etiqueta para poner la tabla a la altura que yo queria y quedo perfecto

    Responder
  10. Avatar de irene
    irene

    gracias me sirvio de mucho

    Responder
  11. Avatar de jeffer
    jeffer

    Gracias Parce, muy bueno y sencillo.

    Responder
  12. Avatar de malackh
    malackh

    3 horas tratando de centrar una tabla para un ebook… jejeje tks…

    Responder
  13. Avatar de Oscar Reina
    Oscar Reina

    Muchas gracias Guillermo, funciono super bien.

    Responder
  14. Avatar de Angi
    Angi

    Una hermosa y simple respuesta! Gracias! He peleado con la dichosa tabla por semanas!

    Responder
  15. Avatar de Raulitos
    Raulitos

    xD, perdi horas probando una y otra cosa , gracias

    Responder
  16. Avatar de Martín
    Martín

    Gracias! funciona OK

    Responder
  17. Avatar de One Web
    One Web

    Igualmente funciona con ID en vez de CLASS, probado. Gracias

    Responder
  18. Avatar de Alejandro
    Alejandro

    ¡Muchas gracias!

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La moderación de comentarios está activada. Su comentario podría tardar cierto tiempo en aparecer.