Выравнивание DIV по центру. Горизонтальное и вертикальное выравнивание элементов

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

Начнем с общего описания задачи.

Задача вертикального центрирования

Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный - задаем ему ширину и автоматическую установку левого и правого полей.

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

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

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

• В строке текста выравнивание производится по отношению к высоте строки.
• В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Метод line-height

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

HTML:

Нужный текст

CSS:

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

HTML:

CSS:

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

HTML:

Содержание

CSS:

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

Мы устанавливаем табличный вывод для родительского элемента div , а вложенный элемент div выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.

В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div будет изменять размер в соответствии со своим содержанием.

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Абсолютное позиционирование и отрицательные поля

Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

HTML:

Содержание

CSS:

#parent { padding: 5% 0; } #child { padding: 10% 0; }

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

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

Плавающий div

Данный метод использует пустой элемент div , который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML.

HTML:

Содержание

CSS:

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Заключение

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

Если разрезать любой сайт, созданный на основе html , то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

• Табличная;
• Блочная.

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

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

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

Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.

Блочное построение на основе тегов также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

• left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right – выравнивание справа, обтекание остальными элементами – слева;
• none – обтекание не допускается;
• inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :

• display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle – выравнивает элемент посредине относительно родительского;
• margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%.

Скрытие и отображение блочных элементов

Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript , меняющая значение свойства css display после нажатия на кнопку (событие onclick ).

Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block ) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display .

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

В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

CSS - Выравнивание блока по центру

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

... ...

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Выравнивание по горизонтали

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

... ...

Block { margin-left: auto; margin-right: auto; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

... ...

Parent { text-align: center; } .child { display: inline-block; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Выравнивание по вертикали

1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

... ...

Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Parent { display: table; } .child { display: table-cell; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

Здравствуйте! Продолжаем осваивать основы языка HTML. Посмотрим, что нужно писать, чтобы выровнять текст по центру, ширине или краям.

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

Способ 1 - прямая работа c HTML

На самом деле все достаточно просто. Смотрите пример ниже.

Выравнивание абзаца по центру.

Если требуется сдвинуть текстовые фрагменты иным образом, то вместо параметра «center» прописываем следующие значения:

• justify – выравнивание текста по ширине страницы;
• right – по правому краю;
• left - по левому.

По аналогии можно сдвинуть контент, который находится в заголовках (h1, h2), контейнере (div).

Способ 2 и 3 - использование стилей

Конструкцию представленную выше можно слегка трансформировать. Эффект будет таким же. Для этого нужно прописать представленный ниже код.

Текстовый блок.

В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.

Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.

Шаг 1. В основном коде написать

Текстовый материал.

Шаг 2. В подключаемом файле CSS вписать следующий код:

Rovno {text-align:center;}

Отмечу, что слово «rovno» это все лишь название класса, который можно назвать и по-другому. Это остается на усмотрение программиста.

По аналогии в HTML можно запросто сделать текст по центру, ширине, а также выровнять по правому или левому краю страницы. Как видите, есть далеко не один вариант достичь цели.

Всего несколько вопросов:

• Делаете информационный некомерческий проект?
• Хотите, чтобы сайт хорошо продвигался в поисковых системах?
• Желаете получать доход в сети?

Если все ответы положительные, то просто посмотрите на о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.

Хотелось бы подметить, что собственные сайты - это лишь один из множества вариантов сформировать пассивный или активный доход на просторах интернета. Мой блог как раз посвящен финансовым возможностям в сети.

Работали когда-нибудь в сфере арбитража трафика, копирайтинга и других направлений деятельности, которые приносят основной или дополнительный доход при удаленном сотрудничестве? Об этом и многом другом вы можете узнать прямо сейчас на страницах моего блога.

Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.

Влад Мержевич

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

Выравнивание TABLE { width: 100%; /* Ширина таблицы */ height: 100%; /* Высота таблицы */ }

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

Выравнивание

Колонка 1

Колонка 2

В данном примере характеристики ячеек управляются с помощью параметров тега , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Выравнивание TABLE { width: 100%; /* Ширина таблицы */ } #col1 { width: 75%; /* Ширина первой колонки */ background: #f0f0f0; /* Цвет фона первой колонки */ } #col2 { width: 25%; /* Ширина второй колонки */ background: #fc5; /* Цвет фона второй колонки */ text-align: right; /* Выравнивание по правому краю */ } #col1, #col2 { vertical-align: top; /* Выравнивание по верхнему краю */ padding: 5px; /* Поля вокруг содержимого ячеек */ }

Колонка 1

Колонка 2

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

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

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

Выравнивание

(18.6)

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

Выравнивание элементов формы

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

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

Выравнивание

Имя
E-mail
Комментарий

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .