Текст по центру в ячейке таблицы

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

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

html alignment html-table center
person Jack Stevens    schedule 03.10.2011    source источник

Ответы (2)


arrow_upward
56
arrow_downward

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

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

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

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

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

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

person Cᴏʀʏ    schedule 03.10.2011
comment
CSS 1 стал рекомендацией почти 15 лет назад. Не используйте атрибут align. - person Quentin; 04.10.2011
comment
@Quentin - Согласен не использовать «выравнивание». Но сам Кори Ларсон рекомендовал эквивалент CSS вместо align=center. Я надеюсь, что вы не пометите его (а если да, рассмотрите возможность его изменения. Хорошо?) - person paulsm4; 04.10.2011
comment
@paulsm4 — ни я, ни он, когда я оставил комментарий. - person Quentin; 04.10.2011
comment
Спасибо за все ваши предложения. Я очень мало знаю о css. Где я должен разместить правило CSS в своем коде? - person Jack Stevens; 04.10.2011
comment
@Jack - в разделе заголовка вашего html-документа. В идеале вам нужно создать включаемый файл css и связать его с заголовком: htmlhelp .com/reference/css/style-html.html - person Daniel Szabo; 04.10.2011

arrow_upward
6
arrow_downward

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

.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>
person Gabe    schedule 03.10.2011