Горизонтальное выравнивание элементов


назад вперед

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


Выравнивание блочных элементов

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

Примеры блочных элементов

Узнать, как выравнивать текст вы можете в главе CSS текст.

В этой главе вы узнаете, как выравнивать блочные элементы по горизонтали.


Выравнивание по центру с использованием свойства margin

Блочные элементы можно выровнять по центру, если задать свойствам margin-left (внешний отступ слева) и margin-right (внешний отступ справа) значение "auto".

Заметка: в Internet Explorer значение "auto" для свойства margin будет работать только если указан !DOCTYPE.

Если вы задаете отступам слева и справа значение "auto", браузер автоматически вычисляет доступное пространство по бокам блока и задает одинаковые отступы справа и слева. Вот результат центрирования элемента:

Пример

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Посмотреть

Совет: выравнивание этим методом не будет работать, если ширина блочного элемента равна 100%.

Заметка: в IE5 этот прием не работает без дополнительных строк кода. Вам нужно поместить выравниваемый блок в элемент div, для которого надо задать text-align:center.


Выравнивание справа/слева с помощью position

Одним из способов выравнивания справа/слева является абсолютное позиционирование:

Пример

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть

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


Заметки о кросс-браузерности

Если вы используете способ выравнивания, описанный выше, будет нелишним точно задать значения margin и padding элемента <body>. Это позволит избежать различий в отображении результата в различных браузерах.

Кроме того, в нашем "любимом" браузере IE существует проблема, проявляющаяся при использовании свойства position. Если содержащий элемент (обычно это <div> с классом "container" или "wrap" (обертка)) имеет явно заданную ширину, при том, что не указан !DOCTYPE, IE добавляет справа отступ в 17px. Предположительно это место зарезервировано под полосу прокрутки. Поэтому, при использовании свойства position в целях выравнивания, не забывайте указывать !DOCTYPE:

Пример

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть


Выравнивание справа/слева с помощью свойства float

Еще одним способом выравнивания элементов по горизонтали является использование свойства float:

Пример

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Посмотреть


Заметки о кросс-браузерности

Если вы используете способ выравнивания, описанный выше, будет нелишним точно задать значения margin и padding элемента <body>. Это позволит избежать различий в отображении результата в различных браузерах.

Кроме того, в нашем "любимом" браузере IE существует проблема, проявляющаяся при использовании свойства float. Если для документа не указан !DOCTYPE, IE добавляет справа отступ в 17px. Предположительно это место зарезервировано под полосу прокрутки. Поэтому, при использовании свойства float в целях выравнивания, не забывайте указывать !DOCTYPE:

Пример

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Посмотреть



Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта