Вы здесь
Главная > Мой блог > WEB-разработка > Выравнивание блока div со свойством position:absolute или fixed по центру

Выравнивание блока div со свойством position:absolute или fixed по центру

Сегодня урок на тему выравнивания блоков с помощью CSS. Здесь есть несколько моментов, которые не совсем просто воспринимаются. Один из них мне бы хотелось сегодня осветить.

Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.

Для этого используется стандартная CSS конструкция margin:auto;

Например:

margin01

Как видите, все работает.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>

position:absolute; — собственно говоря, само абсолютное позиционирование.

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.

left:50%;  – смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

Если ширина блока задается в процентах, то решение может быть следующим:

Если по центру нужно выровнять строку с текстом:

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Вот такие техники. Я недавно потратил достаточно много времени, чтобы узнать, как это делается. Надеюсь, что кому-нибудь совет окажется полезным.

Теперь поговорим о том, как текст можно выровнять по вертикали.

Добавить комментарий

Top