В 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 элемента . Это позволит избежать различий в отображении результата в различных браузерах.
Кроме того, в нашем «любимом» браузере IE существует проблема, проявляющаяся при использовании свойства position. Если содержащий элемент (обычно это с классом «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 элемента . Это позволит избежать различий в отображении результата в различных браузерах.
Кроме того, в нашем «любимом» браузере IE существует проблема, проявляющаяся при использовании свойства float. Если для документа не указан !DOCTYPE, IE добавляет справа отступ в 17px. Предположительно это место зарезервировано под полосу прокрутки. Поэтому, при использовании свойства float в целях выравнивания, не забывайте указывать !DOCTYPE:
body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6;
}