Bagaimana cara menyelaraskan pusat teks dalam baris tabel html?


222

Saya menggunakan HTML <table>dan saya ingin menyelaraskan teks <td>ke tengah di setiap sel.

Bagaimana cara memusatkan menyelaraskan teks secara horizontal dan vertikal?

Jawaban:


323

Berikut ini adalah contoh dengan styleatribut CSS dan inline :

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 : valignAtribut tidak digunakan lagi dalam HTML5 dan tidak boleh digunakan.


1
Bukankah vertical-align:middleseharusnya diterapkan pada trelemen?
posfan12

53

CSS untuk memusatkan teks pada tdelemen Anda adalah

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

29

Coba letakkan ini di file CSS Anda.

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

25

contoh tangan panjang:

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

css steno contoh:

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

5

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

Adalah satu-satunya jawaban yang benar, karena Anda bekerja dengan tabel yang merupakan fungsi lama yang paling umum digunakan untuk pemformatan email. Jadi taruhan terbaik Anda adalah tidak menggunakan gaya saja tetapi gaya inline dan tag tabel yang dikenal.


5
valigntidak digunakan lagi dalam HTML5. Jangan gunakan itu. Untuk pemformatan email, styletag atau styleatribut inline akan menjadi solusi terbaik.
Sean the Bean

1

Pemilih> anak:

.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>


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.