Html tablo satırında metni ortalamak nasıl?


222

Bir HTML kullanıyorum <table>ve metnini <td>her hücrenin ortasına hizalamak istiyorum .

Metni yatay ve dikey olarak nasıl hizalayabilirim?

Yanıtlar:


323

İşte CSS ve satır içi styleözelliklere sahip bir örnek :

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 : valignÖzellik HTML5'te kullanımdan kaldırıldı ve kullanılmamalıdır.


1
Değil mi vertical-align:middleuygulanacak gerekiyordu treleman?
posfan12

53

Metni tdöğelerinizde ortalayacak CSS :

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

30

Bunu CSS dosyanıza koymaya çalışın.

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

25

uzun el satır içi örneği:

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

stenografi css örneği:

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

5

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

E-posta biçimlendirmesi için en yaygın kullanılan eski işlevsellik içeren tablolarla çalışmanız nedeniyle tek doğru yanıt imho'dur. Bu yüzden en iyi seçeneğiniz sadece stil değil, satır içi stil ve bilinen tablo etiketlerini kullanmaktır.


5
valignHTML5'te kullanımdan kaldırıldı. Bunu kullanma. E-posta biçimlendirmesi için bir styleetiket veya satır içi styleözellik en iyi çözüm olacaktır.
Sean the Bean

1

Seçici> çocuk:

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


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.