left: 50%; /* Положение слоя от левого края */
height: 180px; /* Высота слоя в пикселах */
width: 280px; /* Ширина слоя в пикселах */
position: absolute; /* Абсолютное позиционирование */
<style type="text/css">
<title>Выравнивание по центру</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
Пример 1. Размеры слоя в пикселах
Чтобы высота слоя не менялась из-за его контента, включено свойство overflow: auto, оно добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 1).
Так как координаты слоя мы определяем от его левого верхнего угла, для точного выравнивания следует добавить свойства margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left) и высоты (для margin-top).
Следующий шаг — задаем абсолютное позиционирование слоя через position со значением absolute. Положение слоя следует задать как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.
Вначале следует указать ширину и высоту слоя с помощью свойств width и height. Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах.
Выравнивание слоя строго по центру веб-страницы применяется обычно для размещения картинки, служащей точкой входа на сайт или информационного сообщения. Удобство подобного расположения слоя его независимость от разрешения экрана монитора и окна браузера. В любом случае слой будет занимать положение по центру веб-страницы.
Опубликовано: 28.09.2010Влад Мержевич
Слой по центру веб-страницы
htmlbook.ru - Макеты - Слой по центру веб-страницы
Комментариев нет:
Отправить комментарий