Kompx.com or Compmiscellanea.com

CSS выравнивание по центру : по ширине и по высоте - 1

Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ].

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

HTML / XHTML. Код:

<!DOCTYPE html>

<html>

<head>

<title>CSS выравнивание по центру : по ширине и по высоте - 1</title>

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

</head>

<body>

<div class="all">

<div class="wrapper">

<div class="pagecontent">&nbsp;</div>

</div>

</div>

</body>

</html>

CSS. Код:

html {height: 100%; margin: 0px;}

body height: 100%; margin: 0px;}

.all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;}

.wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;}

.pagecontent {position: relative; left: 0px; top: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;}

Контейнер .pagecontent - для всего содержимого веб-страницы. В отличии от CSS выравнивание по центру, по вертикали и по горизонтали - 2, в данном случае как единицы измерения CSS могут использоваться проценты; а не только px или em. Высота и ширина могут быть больше видимой области окна браузера, но в данном случае речь о более практическом случае - когда высота и ширина контейнера .pagecontent меньше, чем размеры видимой области окна браузера.

Блок .pagecontent выравнивается в видимой области окна браузера по центру / по ширине с помощью "margin: 0 auto".

.All и его CSS свойства превращают всю видимую область окна браузера в CSS-таблицу.

Свойства CSS делают контейнер .wrapper ячейкой этой CSS-таблицы. Содержимое этой ячейки - контейнер .pagecontent и все, что в нем находится - выравнивается в видимой области окна браузера по центру / по высоте свойством CSS "vertical-align: middle".


[ 1 ]

А так же в Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

А так же в Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

<hr /> по центру CSS

 

Выравнивание <hr /> по центру с помощью CSS, если ее ширина меньше 100%. Горизонтальное выравнивание по центру. Пример: HTML / XHTML. Код: <hr /> CSS. Код: hr {width: 50%; margin: 0 25% 0 25%;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */ hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;} Примечание: большей частью работает как с float: left, так и с float: none. Однако с float: left самый верный вариант. [ 1 ] А так же в Netscape 4.04+, Mozilla 0.6+. [ 2 ] А так же в Netscape 4.04+, Mozilla 0.6+.

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

 

1 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 1 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Для более современных браузеров : [ Подробнее ] : [ Открыть страницу-пример ] 2 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 2 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Более консервативный, чем предыдущий вариант. Подходит не только для современных браузеров, но и для более старых. Таких как Internet Explorer 6 или ранние версии Maxthon. При необходимости что-то изменить, требует больше усилий, чем первый способ : [ Подробнее ] : [ Открыть страницу-пример ] 3 ) Горизонтальное выравнивание блока неизвестной ширины Горизонтальное выравнивание блока неизвестной ширины средствами CSS : [ Подробнее ] : [ Открыть страницу-пример ] 4 ) Position: absolute по центру Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS : [ Подробнее ] 5 ) Изображение по центру CSS Горизонтальное выравнивание изображения по центру с помощью CSS : [ Подробнее ] 6 ) Вертикальное выравнивание CSS Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения : [ Подробнее ] 7 ) Выравнивание по центру с помощью JavaScript и CSS Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью JavaScript и CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по вертикали и по горизонтали : [ Подробнее ] : Два случая : 1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 : [ Открыть страницу-пример ] 2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы : [ Открыть страницу-пример ]