c o m p m i s c e l l a n e a . c o m

Выравнивание по центру с помощью HTML

Windows : Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx и 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 5.0 - 6.xx и 9.0+, SeaMonkey 1.0+ [ 2 ].

Выравнивание содержимого страницы по центру, по ширине и по высоте с помощью HTML. По центру выравнивается контейнер, в котором находится всё содержимое веб-страницы - [ Открыть страницу-пример ]

Выравнивание по центру, по ширине и по высоте с помощью HTML, по шагам

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

HTML. Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Выравнивание по центру с помощью HTML. Шаг 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

</head>

<body bgcolor="#ffffff">

</body>

</html>

2. В теле страницы создается каркас в виде таблицы шириной в 100% и высотой в 100%, с параметром align="center", с одной строкой, с одной ячейкой в ней параметром align="center". (Зеленый цвет). Для того, что бы код работал в Internet Explorer 3.0, помещаем весь каркас в тег <center></center>. Для более новых браузеров, естественно, это не нужно. [ Результат ]

HTML. Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Выравнивание по центру с помощью HTML. Шаг 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

</head>

<body bgcolor="#ffffff">

<!-- Для Internet Explorer 3 --><center><!-- Для Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#a3ddc4">

<tr>

<td align="center"></td>

</tr>

</table>

<!-- Для Internet Explorer 3 --></center><!-- Для Internet Explorer 3 -->

</body>

</html>

3. Внутри этого каркаса, в ячейке таблицы помещается другая таблица, например, шириной в 800px и высотой в 500px. (Серый цвет). В принципе, содержимое ячейки вовсе не обязательно должно быть таблицей или иметь свойства заданные с помощью HTML. [ Результат ]

HTML. Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Выравнивание по центру с помощью HTML. Шаг 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

</head>

<body bgcolor="#ffffff">

<!-- Для Internet Explorer 3 --><center><!-- Для Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#a3ddc4">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="800" height="500" align="center" bgcolor="#999999">

<tr>

<td>&nbsp;</td>

</tr>

</table>

</td>

</tr>

</table>

<!-- Для Internet Explorer 3 --></center><!-- Для Internet Explorer 3 -->

</body>

</html>

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

Страница примера выравнивания по центру с помощью HTML, итоговый результат [ Результат ] [ Cкачать в архиве ].

HTML. Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Выравнивание по центру с помощью HTML. Итоговый результат</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

</head>

<body bgcolor="#ffffff">

<!-- Для Internet Explorer 3 --><center><!-- Для Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="800" height="500" align="center" bgcolor="#999999">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="710" height="410" align="center" bgcolor="#ffffff">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="708" height="408" align="center" bgcolor="#999999">

<tr>

<td>

<table cellspacing="0" cellpadding="0" border="0" width="708" height="110" align="center" bgcolor="#999999">

<tr>

<td align="center" valign="top"><a href="http://www.compmiscellanea.com/"><font face="Georgia,serif" color="#000000" size="6">COMPMISCELLANEA.COM</font></a></td>

</tr>

<tr>

<td align="center"><a href="http://www.compmiscellanea.com/ru/vyravnivanie-po-centru-html.htm"><font face="Georgia,serif" color="#ffffff" size="4">Выравнивание по центру с помощью HTML</font></a></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!-- Для Internet Explorer 3 --></center><!-- Для Internet Explorer 3 -->

</body>

</html>

Выравнивание по центру, по ширине и по высоте с помощью HTML.

Самый старый из используемых способов выравнивания по центру, по ширине и по высоте. Ныне применяется все реже и реже в связи с распространением семантической верстки. Однако, устарев морально, этот способ остается работающим - причем, не только в основных и современных браузерах, но и во многих альтернативных и устаревших. Поэтому, при возникновении какой-то необходимости или появлении обусловленного теми или иными обстоятельствами желания, пользоваться выравниванием по центру, по ширине и по высоте с помощью HTML, тега <table><table/> возможно вполне.

Одним из недостатков выравнивания по центру, по ширине и по высоте с помощью HTML, тега <table><table/> является то, что код получается невалидным, так как используется параметр тега <table><table/> (параметр height), который хоть и поддерживается многие годы большинством браузеров, но противоречит стандартам, продвигаемым Интернет-консорциумом (W3C). В 1990ые - начале 2000ых сложность или невозможность добиться одновременно валидного и работающего в основных браузерах кода была печальной реальностью. Сейчас несколько иначе, и с этой точки зрения тоже, вариант выравнивания по центру, по ширине и по высоте с помощью CSS является предпочтительным.

Пример, приводимый в данном посте, для чистоты эксперимента основан на использовании только HTML. Но на практике, например, при верстке для основных современных браузеров, возможно сочетание использования HTML и CSS, когда тег <table><table/> будет использоваться только для выравнивания контейнера содержимого страницы по центру, по ширине и по высоте. А обращение с содержимым этого контейнера будет делаться уже так, как удобнее: тем или иным сочетанием HTML и CSS; может и еще каких-то других технологий.

Общая идея

Создается таблица шириной в 100% и высотой в 100%, с параметром align="center", с одной строкой, с одной ячейкой с параметром align="center". Это создает каркас, который при любом размере видимой области окна браузера, при любом разрешении дисплея занимает всю видимую область окна браузера и по ширине, и по высоте (с учетом margin'ов, естественно). Если только содержимое этого каркаса не окажется больше размеров видимой области окна браузера. Тогда каркас окажется больше, возникнут полосы прокрутки: но этот случай выходит за пределы рассматриваемого вопроса - когда тег <table><table/> используется для выравнивания по центру, по ширине и по высоте, вполне возможно контролировать размеры содержимого страницы. В результате, содержимое ячейки таблицы будет оказываться выравненным по центру, по ширине и по высоте при любом разрешении монитора и при любом размере видимой области окна браузера.

Так же по теме:

Выравнивание по центру с помощью CSS

Выравнивание по центру с помощью JavaScript + CSS

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

[ 1 ]

А так же в Netscape 2.02 - 4.80 и Offbyone. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.

[ 2 ]

А так же в Netscape 2.02 - 4.80. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.

Перейти

Наверх | Главная