Центр текста в ячейке таблицы - PullRequest
Новая
       19

Центр текста в ячейке таблицы

34 голосов
/ 04 октября 2011

Я не могу найти ответ на свой вопрос.У меня есть таблица с двумя строками и двумя столбцами (как в коде, показанном ниже), как выровнять по центру текст в определенных ячейках.Я хотел бы выровнять текст по центру в одной или двух ячейках, а не во всех ячейках.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>

Ответы [ 2 ]

50 голосов
/ 04 октября 2011

Я бы порекомендовал использовать CSS для этого. Вы должны создать правило CSS для обеспечения центрирования, например: 

.ui-helper-center {
    text-align: center;
}

А затем добавьте класс ui-helper-center к ячейкам таблицы, для которых вы хотите управлять выравниванием: 

<td class="ui-helper-center">Content</td>

РЕДАКТИРОВАТЬ : Так как этот ответ был принят, я чувствовал себя обязанным отредактировать части, которые вызвали пламенную войну в комментариях, и не продвигать плохие и устаревшие методы.

См. Ответ Гейба о том, как включить правило CSS на вашу страницу.

6 голосов
/ 04 октября 2011

Как насчет просто (Обратите внимание, придумайте более подходящее имя для имени класса, это просто пример): 

.centerText{
   text-align: center;
}


<div>
   <table style="width:100%">
   <tbody>
   <tr>
      <td class="centerText">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td class="centerText">Cell 3</td>
      <td>Cell 4</td>
    </tr>
    </tbody>
    </table>
</div>

Пример здесь

Вы можете поместить css в отдельный файл, что рекомендуется.В моем примере я создал файл с именем styles.css и поместил в него свои правила css.Затем включите его в html-документ в разделе <head> следующим образом: 

<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

Альтернатива - не создавать отдельный файл CSS, вообще не рекомендуется ... Создать блок <style> в вашем <head> в HTML-документе.Тогда просто разместите там свои правила. 

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>
...