Як вирівняти текст по центру в рядку таблиці HTML?


222

Я використовую HTML <table>і хочу вирівняти текст <td>у центрі кожної комірки.

Як вирівняти текст по горизонталі та вертикалі?

Відповіді:


323

Ось приклад з styleатрибутами CSS та 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 : valignАтрибут застарілий у HTML5 і його не слід використовувати.


1
Чи не vertical-align:middleслід застосовувати trелемент?
posfan12

53

CSS для центру тексту у ваших tdелементах є

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

29

Спробуйте помістити це у свій CSS файл.

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

25

Приклад з довгими руками:

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

короткочасний приклад css:

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

5

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

Єдина правильна відповідь imho, оскільки ваша робота з таблицями, яка є найстарішою функціональністю, найчастіше використовується для форматування електронної пошти. Тож найкраще скористатися не просто стилем, а вбудованим стилем та відомими тегами таблиці.


5
valignзастаріло в HTML5. Не використовуйте. Для форматування електронної пошти найкращим рішенням стане styleтег або styleатрибут вбудованого характеру.
Шон Бін

1

Вибір> дитина:

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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.