Come centrare una tabella dello schermo (verticale e orizzontale)

Question

ho questi blocco di codice:

<table border="1px"> 
<tr> 
<td> 
my content 
</td> 
</tr> 
</table> 

mi piacerebbe mostrare il mio tavolo al centro dello schermo (verticale e orizzontale).

Here is a demo.

come posso farlo?

Answer 1

questo risolve il punto morto di dialogo sullo schermo:

HTML

<table class="box" border="1px"> 
    <tr> 
     <td> 
      my content 
     </td> 
    </tr> 
</table> 

CSS

.box { 
    width:300px; 
    height:300px; 
    background-color:#d9d9d9; 
    position:fixed; 
    margin-left:-150px; /* half of width */ 
    margin-top:-150px; /* half of height */ 
    top:50%; 
    left:50%; 
} 

Visualizza i risultati del

http://jsfiddle.net/bukov/wJ7dY/168/

Answer 2

Penso che questo dovrebbe fare il trucco:

<table border="1px" align="center"> 

Secondo http://w3schools.com/tags/tag_table.asp questo è deprecato, ma provarlo. Se non funziona, vai per gli stili, come indicato sul sito.

Answer 3

Il centraggio orizzontale è facile. Hai solo bisogno di impostare entrambi i margini su "auto":

table { 
    margin-left: auto; 
    margin-right: auto; 
} 

verticale centraggio di solito si ottiene impostando il tipo di visualizzazione elemento padre di table-cell e utilizzando vertical-align proprietà. Supponendo di avere un <div class="wrapper"> intorno alla tua mensa:

.wrapper { 
    display: table-cell; 
    vertical-align: middle; 
} 

Informazioni più dettagliate sono reperibili sul http://www.w3.org/Style/Examples/007/center

Se hai bisogno di supporto per le versioni precedenti di Internet Explorer (non so cosa funziona nel quale versione di questo strano e raramente utilizzato il browser ;-)) allora si potrebbe voler search the web per ulteriori informazioni, come: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (solo un primo colpo, che sembra parlare di IE)

Answer 4

This guy aveva la bacchetta magica che stavamo cercando, ragazzi.

di citare la sua risposta:

Just Add "position: fixed" e sarà tenerlo in considerazione, anche se si scorre verso il basso. vederlo al http://jsfiddle.net/XEUbc/1/

#mydiv { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:30em; 
    height:18em; 
    margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
    margin-left: -15em; /*set to a negative number 1/2 of your width*/ 
    border: 1px solid #ccc; 
    background-color: #f3f3f3; 
} 

Answer 5

Sto usando questo piccolo trucco per un po '. Potresti divertirti.nido la tabella che si desidera centrare in un'altra tabella:

<table height=100% width=100%> 
<td align=center valign=center> 

(aggiungere il tavolo qui)

</td> 
</table> 

l'align e valign mettere la tabella esattamente al centro dello schermo, non importa che cosa sta succedendo.

Answer 6

Ho provato sopra l'attributo align in HTML5. Non è supportato Ho anche provato flex-align e vertival-align con gli attributi di stile. Ancora non è possibile posizionare TABELLA al centro dello schermo. Il seguente stile posiziona la tabella al centro in senso orizzontale.

style = "margin: auto;"

Answer 7

per l'allineamento orizzontale (No CSS)

basta inserire un attributo align all'interno del tag table

<table align="center"></table