Comment positionner une table au centre de la division horizontalement et verticalement

Question

nous pouvons définir une image comme image d'arrière-plan d'un div comme

 <style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>
 

si j'ai besoin de mettre une table au centre de div horizontalement et verticalement. comment le faire par css et qui sera cross browser. s'il vous plaît guider. Merci

Answer 1

Le centrage est l'un des plus gros problèmes en CSS. Cependant, quelques astuces existent:

Pour centrer votre table horizontalement, vous pouvez définir les marges gauche et droite sur auto:

 <style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>
 

Pour le centrer verticalement, le seul moyen est d’utiliser javascript:

 var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools
 

Aucun vertical-align:middle n'est possible car une table est un bloc et non un élément en ligne.

Answer 2

Pour centrer horizontalement, vous pouvez dire width: 50%; margin: auto; . Pour autant que je sache, c'est cross browser. Pour un alignement vertical, vous pouvez essayer vertical-align:middle; , mais cela ne fonctionne que pour le texte. Cela vaut la peine d'essayer cependant.

Answer 3

En outre, si vous voulez centrer horizontalement et verticalement,au lieu d'avoir un flux de conception (dans de tels cas, les solutions précédentes s'appliquent)- vous pouvez faire:

1. Déclarer la div principale en tant que absolute ou relative positionnement (j'appelle ça de l' content).
2. Déclarer un à l'intérieur de la div, qui détiendra la table (j'appelle ça de l' wrapper).
3. Déclarer le tableau lui-même, à l'intérieur d' wrapper div.
4. Appliquer le style CSS de transformer, de changer le "point d'enregistrement" de l'objet wrapper à son centre.
5. Déplacer l'objet wrapper pour le centre de l'objet parent.

Exemple:

<div id="content">
    <div id="wrapper">
        <table>...</table>
    </div>
</div>

Exemple de CSS:

#content {
    /* TODO set a width and height here */
    position: relative;
}

#wrapper {
    position: absolute;
    left: 50%; top: 50%; /*move the object to the center of the parent object*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
}

Remarque: Vous ne pouvez pas vous débarrasser de l'emballage div, car ce style ne fonctionne pas directement sur les tables, donc j'utilise un div pour l'envelopper et la position, tandis que la table est coulé à l'intérieur de la div.

Answer 4

J'ai découvert que je devais inclure

 body { width:100%; }
 

for "margin: 0 auto" pour travailler avec les tables.