Просмотров: 15 451

Выравнивание содержимого по горизонтали и вертикали внутри ячейки таблицы с помощью CSS.

Предположим, что у нас есть ячейки таблицы, для которых задана фиксированная высота и содержимое, которое в них находится. Это может выглядеть вот так:

<table width="200"  border="1">
 <tr>
 <td style="height:200px;">Содержимое ячейки 1</td>
 <td style="height:200px;">Содержимое ячейки 2</td>
 </tr>
 </table>

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

Каким образом мы можем выровнять содержимое в ячейке по определенному краю?

 

Продолжим, если мы говорим о выравнивании по горизонтали, то можно воспользоваться CSS свойством

text-align:center;

Возможны еще значения left – по левому краю и right – по правому.

Ситуация выравнивания по вертикали:

В случае, когда необходимо выравнивание по вертикали, можно воспользоваться свойством:

vertical-align

у этого свойства есть три основных значения, которые чаще всего могут понадобиться:

top – выравнивание по верхнему краю;

middle – по середине;

bottom – по нижнему краю.

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

<table width="200"  border="1">
 <tr>
 <td style="height:200px; text-align:center; vertical-align:top;">Содержимое ячейки 1</td>
 <td style="height:200px; vertical-align:bottom;">Содержимое ячейки 2</td>
 </tr>
 </table>

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

В результате, используя два этих CSS-свойства, можно выравнивать содержимое в ячейке таблицы в нужном месте, по нужному краю.

Если внутри ячейки таблицы изображение, то выравнять по центру его можно точно также:

<table border="1">
 <tr>
 <td style="height:200px; width:300px; text-align:center; vertical-align:middle;"><img src="//webgyry.info/logo.png"></td>
 <td style="height:200px; vertical-align:bottom;">Содержимое ячейки 2</td>
 </tr>
 </table>

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

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2

  • Мила

    text-align:center; это выравнивание для текста, а если в ячейке картинка, как ее выравнять по центру?

    • admin

      Добавил ответ в текст статьи, посмотрите.

  • Наталья

    Спасибо большое за подсказку. Мелочь, а приятно — легко снимает головную боль с выравниванием (+ добавлением других полезностей css) в отдельно взятых ячейках таблицы.

  • Андрей

    Здравствуйте, если в ячейке таблицы есть картинка и текст как можно их выровнять независимо, например картинку по центру вертикально и горизонтально, а текст снизу по центру. Что не так в моём коде
    table tr {height:500px;text-align:center; vertical-align:bottom;}
    table img {align:center; vertical-align:middle;}