Центровка элементов в CSS, не имеющих постоянной ширины
Перевод: Nuxx aka Антон Грахов
Расположить по центру блочный элемент очень легко, указав margin:auto и ширину этого элемента (IE5+ требуют text-align:center для родительского элемента). Иногда необходимо отцентрировать блочный элемент, не имеющей точной ширины, обернув его в другой блочный элемент. Для этого нужно приложить немного усилий.
К счастью, есть очень простой способ достичь этого. Если вы уже видели пример вертикального центрирования элемента, когда этот элемент сначала перемещается вниз на 50%, а затем родительский элемент смещается вверх на 50% — в результате чего мы получаем вертикально выровненный элемент, то этот способ будет вам знаком. К сожалению, данный метод вертикального центрирования работает только в браузерах IE, но если мы используем его для горизонтального выравнивания элемента, то этот метод поймут и остальные браузеры.
.xouter{
position:relative;
left:50%;
float:left;
clear:both;
margin:10px 0;
text-align:left;
}
.xinner{
border:1px solid #000;
padding:10px 20px;
position:relative;
left:-50%;
text-align:left;
}
Браузер IE5 на Mac отобразит результат применения данного способа неверно. Решением этой проблемы является использование display:inline-block для выравниваемого элемента. Причина использования плавающего блока без явного указания ширины в том, что он обертывает контент так, как нам этого хотелось.
Внешний элемент перемещается на 50% от левого края с использованием position:relative (указание этого необходимо для того, чтобы этот блок не выбивался из нормального потока документа). Внутренний элемент перемещается назад на 50% влево так же с использованием postion:relative — все это в совокупе позволяет нам выровнить блок, не имеющий точной ширины, точно посередине.
Использование этого метода порождает одну проблему: если выравниваемый блок имеет ширину большую половины размера окна, то в этом случае появляется полоса прокрутки (это относится как к вертикальному выравниванию, так и к горизонтальному — примеч. переводчика). Это можно обойти, обернув все содержимое еще одним блоком, установив для него overflow:hidden, и тогда прокрутки не будет. Кроме того, для IE 7 необходимо также применить position:relative, иначе прокрутка не исчезнет.
.wrap{
overflow:hidden;
position:relative;/* ie7 needs position:relative here*/
}
Несколько примеров использования описанного метода.
Данная статья является переводом. При желании вы всегда можете прочитать эту статью на английском языке.
Отправить комментарий