Выравнивание текста в заголовке таблицы

Кажется, align не работает для элемента th. Вот мой HTML:

<div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

Ответы

Ответ 1

Try:

text-align: center;

Возможно, вы знакомы с атрибутом выравнивания HTML (который был отменен с HTML 5). Атрибут align можно использовать с тегами, такими как

<table>, <td>, and <img>

чтобы указать выравнивание этих элементов. Этот атрибут позволяет выравнивать элементы по горизонтали. HTML также имеет/имеет атрибут valign для выравнивания элементов по вертикали. Это также было прекращено из HTML5.

Эти атрибуты были прекращены в пользу использования CSS для установки выравнивания элементов HTML.

На самом деле нет свойства CSS align или CSS valign. Вместо этого CSS имеет выравнивание по тексту, которое применяется к встроенному содержимому элементов уровня блока, и свойство vertical-align, которое применяется к ячейкам встроенного уровня и таблицы.

Ответ 2

Попробуйте использовать стиль для th

th {text-align:center}

Ответ 3

Попробуйте использовать выравнивание по тексту в атрибуте style для выравнивания центра.

<th class="not_mapped_style" style="text-align:center">DisplayName</th>

Ответ 4

Если вы хотите центрировать все таблицы:
table th{ text-align: center; }

Если вы хотите центрировать только таблицу с определенным идентификатором:
table#tableId th{ text-align: center; }

Ответ 5

HTML:

<tr>
    <th>Language</th>
    <th>Skill Level</th>
    <th>&nbsp;</th>
</tr>

CSS:

tr, th {
    padding: 10px;
    text-align: center;
}

Ответ 6

Ваш код работает, но для этого используются устаревшие методы. Для этого нужно использовать свойство CSS text-align, а не свойство align. Тем не менее, это должен быть ваш браузер или что-то еще, что влияет на него. Попробуйте эту демонстрацию в Chrome (мне пришлось отключить normalize.css, чтобы получить ее для рендеринга).

Ответ 7

В HTML5 самый простой и быстрый способ сосредоточить ваш <th>THcontent</th> - добавить colspan следующим образом:

<th colspan="3">Thcontent</th>

Это будет работать, если ваша таблица состоит из трех столбцов. Поэтому, если у вас есть таблица с четырьмя столбцами, добавьте colspan из 4 и т.д.

Вы также можете управлять местоположением в файле CSS, пока вы помещаете colspan в HTML, как я уже сказал.

th { 
    text-align: center; /* Or right or left */
}

Ответ 8

Для меня ничего из этого не было. Я думаю, это потому, что у меня два уровня заголовка и фиксированная ширина на уровне 1. Поэтому я не смог выровнять текст внутри соответствующих столбцов на уровне 2.

+---------------------------+
|           lvl 1           |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+

Мне пришлось использовать комбинацию width: auto и text: align-center:

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>