Сегодня урок на тему выравнивания блоков с помощью CSS. Здесь есть несколько моментов, которые не совсем просто воспринимаются. Один из них мне бы хотелось сегодня осветить.
Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.
Для этого используется стандартная CSS конструкция margin:auto;
Например:
|
1 2 3 4 |
<div style="width:900px; height:200px; background:#096;"> <div style="<strong>margin:auto;</strong> width:300px; height:100px; background:#CC0;"> </div> </div> |
Как видите, все работает.
Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.
Т.е. в данном случае наш пример принимает следующий вид.
|
1 2 3 4 5 |
<div style="width:900px; height:200px; background:#096; <strong>position:relative;</strong>"> <div style="margin:auto; width:300px; height:100px; background:#CC0; <strong>position:absolute;</strong>"></div> </div> |
position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>
position:absolute; — собственно говоря, само абсолютное позиционирование.
После произведенной манипуляции margin:auto работать уже перестает.
Как быть? Как можно снова выровнять блок по центру?
Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.
|
1 2 3 4 |
<div style="width:900px; height:200px; background:#096; position:relative;"> <div style="margin:auto; width:300px; height:100px; background:#CC0; position:absolute; <strong>left:50%; margin-left:-150px;</strong> "></div></div> |
left:50%; – смещаем блок относительно родительского на 50% влево.
margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.
Если ширина блока задается в процентах, то решение может быть следующим:
|
1 2 3 4 5 |
<div style="width:900px; height:200px; background:#096; position:relative;"> <div style="margin:auto; width:50%; height:100px; background:#CC0; position:absolute; <strong>left:50%; margin-left:-25%;</strong> "></div> </div> |
Если по центру нужно выровнять строку с текстом:
|
1 |
<p style=" position:absolute; top:0; text-align:center; <strong>width:100%</strong>;">Строка текста</p> |
Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.
Вот такие техники. Я недавно потратил достаточно много времени, чтобы узнать, как это делается. Надеюсь, что кому-нибудь совет окажется полезным.
Теперь поговорим о том, как текст можно выровнять по вертикали.