Просмотров: 1 303

Центрирование элемента без заданной ширины и высоты по центру с помощью свойства Float.

В продолжение статьи, про центрирование элементов с position:absolute по центру, которая опубликована здесь, хочу рассказать еще об одной проблеме, с которой можно столкнуться.

В предыдущей статье все примеры, которые приводились, выравнивали блок по центру и у этого блока была явно задана ширина. Если ширина у блока явно не задана и она формируется относительно внутреннего содержимого блока, то способы центрирования, которые были рассмотрены ранее не работают.

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

Для этого всю структуру нужно обернуть еще в один блок div и воспользоваться свойством float.

<div style="position: relative; overflow: hidden; background: aqua;">
   <div style="float:left; position:relative; left:50%;">
       <div style="float:left; position:relative; left:-50%; background:red;">
       Пример элемента без заданной ширины и высоты.
       </div>
   </div>
   <div style="clear:both;"></div>
</div>

Получаем следующий результат.

Первый по вложенности блок смещается на 50% ширины родительского блока. Второй по вложенности блок смещается на -50% первого по вложенности блока.

В итоге, второй по вложенности блок будет располагаться по центру.

Довольно трудно для понимания, но если уделить этому время, то разобраться можно.

Если вам необходима техническая помощь по каким-то проблемам веб-разработки и вы не хотите тратить на их решение время, пишите мне на e-mail webgyry@gmail.com.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».

  • Сергей

    Спасибо! Единственный пример, который отлично отработал внутри кучи других дивов)))