Come allineare al centro il testo nella riga della tabella html?


222

Sto usando un HTML <table>e voglio allineare il testo <td>al centro in ogni cella.

Come posso allineare al centro il testo in orizzontale e in verticale?

Risposte:


323

Ecco un esempio con CSS e styleattributi incorporati :

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}
<table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

http://jsfiddle.net/j2h3xo9k/

EDIT : l' valignattributo è obsoleto in HTML5 e non deve essere utilizzato.


1
Il vertical-align:middlesupposto non deve essere applicato trall'elemento?
posfan12

53

Il CSS per centrare il testo nei tuoi tdelementi è

td {
  text-align: center;
  vertical-align: middle;
}

29

Prova a metterlo nel tuo file CSS.

td {
    text-align: center;
    vertical-align: middle;
}

25

esempio in linea a mano lunga:

<td style='text-align:center;vertical-align:middle'></td> 

esempio css di stenografia:

td{
 text-align:center;
 vertical-align:middle;
}

5

<td align="center" valign="center">textgoeshere</td>

È l'unica risposta corretta imho, dal momento che si lavora con le tabelle che è la vecchia funzionalità più comune utilizzata per la formattazione della posta elettronica. Quindi la tua scommessa migliore è non usare solo lo stile ma lo stile in linea e i tag di tabella noti.


5
valignè obsoleto in HTML5. Non usarlo. Per la formattazione della posta elettronica, la soluzione migliore sarebbe un styletag o un styleattributo incorporato .
Sean the Bean,

1

Selettore> bambino:

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}
<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.