В CSS несколько свойств используются для выравнивания элементов горизонтально.
Выравнивание блочных элементов
Блочный элемент это элемент, который занимает всю доступную ширину и имеет разрыв строки до и после него.
Пример блочного элемента:
Для выравнивания текста смотрите раздел CSS Текст.
В этой главе мы покажем вам, как горизонтально выравнивать блочные элементы для целей расположения.
Выравнивание по центру с использованием свойства margin
Блочные элементы могут быть выравненны путем уставновки левого и правого поля в "auto".
Примечание: Использование margin:auto не будет работать в Internet Explorer, пока не указан !DOCTYPE.
Настройка левого и правого поля в auto указывает на то, что они должны разделить поле в равной степени. В результате элемент отцентровывается:
Пример 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.center { margin:auto; width:70%; background-color:#b0e0e6; }
</style>
</head>
<body>
<div class="center">
<p>Остап проснулся после многих толчков и уговоров. Он
внимательно посмотрел на Ипполита Матвеевича и радостно
засмеялся. Отвернувшись от директора-учредителя
концессии, главный руководитель работ и технический
директор содрогался, хватался за спинку кровати, кричал
"не могу" и снова бушевал.
</p>
</div>
<p><b>Примечание: </b>Использование margin:auto не будет работать в Internet Explorer, если !DOCTYPE не объявлен.</p>
</body>
</html>
Совет: Выравнивание не действует, если ширина 100%.
Левое и правое выравнивание с использованием свойства position
Один из способов выравнивания элементов заключается в использовании абсолютного позиционирования:
Пример 2
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
</style>
</head>
<body>
<div class="right">
<p>Остап проснулся после многих толчков и уговоров. Он
внимательно посмотрел на Ипполита Матвеевича и радостно
засмеялся. Отвернувшись от директора-учредителя
концессии, главный руководитель работ и технический
директор содрогался, хватался за спинку кровати, кричал
"не могу" и снова бушевал.</p>
</div>
</body>
</html>
Примечание: Абсолютная расположеные элементы удаляются из нормального потока, и могут перекрываться элементами.
Вопросы кросс-браузерной совместимости
При выравнивании элементов, как этих, всегда хорошая идея это предопределить margin и padding для элемента <body>. Это сделано во избежание визуальные различий в разных браузерах.
Существует и другая проблема с IE, во время использования свойства position.
Если элемент-контейнер (в нашем случае <div class="container">) имеет width, и декларация !DOCTYPE отсутствует, IE добавляет 17px поля с правой стороны. Это, возможно, место, предназначенное для прокрутки. Всегда устанавливайте декларацию !DOCTYPE во время использования свойства position:
Пример 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body { margin:0; padding:0; }
.container { position:relative; width:100%; }
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Примечание: </b>При выравнивании с использованием свойства position, всегда включайте декларацию !DOCTYPE! Если отсутствует, это может привести к странным результатам в браузере IE.</p>
</div>
</div>
</body>
</html>
Левое и правое выравнивание с использованием свойства float
Один из способов выравнивания элементов заключается в использовании свойства float:
Пример 4
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.right { float:right; width:300px; background-color:#b0e0e6; }
</style>
</head>
<body>
<div class="right">
<p>Остап проснулся после многих толчков и уговоров. Он внимательно посмотрел на Ипполита Матвеевича и радостно засмеялся. Отвернувшись от директора-учредителя концессии, главный руководитель работ и технический директор содрогался, хватался за спинку кровати, кричал "не могу" и снова бушевал.</p>
</div>
</body>
</html>
Вопросы кросс-браузерной совместимости
При выравнивании элементов, как этих, всегда хорошая идея это предопределить margin и padding для элемента <body>. Это сделано во избежание визуальные различий в разных браузерах.
Существует и другая проблема с IE во время использования свойства float. Если декларация !DOCTYPE отсутствует, IE добавляет 17px поля с правой стороны. Это, возможно, место, предназначенное для прокрутки. Всегда устанавливайте декларацию !DOCTYPE во время использования свойства float:
Пример 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body { margin:0; padding:0; }
.right { float:right; width:300px; background-color:#b0e0e6; }
</style>
</head>
<body>
<div class="right">
<p><b>Примечание: </b>При выравнивании с использованием свойства position, всегда включайте декларацию !DOCTYPE! Если отсутствует, это может привести к странным результатам в браузере IE.</p>
</div>
</body>
</html>
Была ли эта информация полезной?
