Выравнивание блоков по центру в CSS

Версия для печатиВерсия для печати

Выравнивание содержимого по горизонтали, которое имеет свойство float, можно сделать очень легко и кроме того полностью кроссбраузерно (работает в Opera 8+, Firefox 3+, IE 5.5+).

Пример выравнивания div-блока

Чтобы выравнять блок со свойством float или несколько расположенных в ряд блоков, необходим еще один внешний блок. Внешнему блоку и внутренним блокам назначается position: absolute; и float: left;, внешнему назначить left: 50%;, а внутренним блокам right: 50%;. Для использования float: right; нужно назначить внешнему назначить right: 50%;, а внутренним блокам left: 50%;. Рекомендую очищать float, размещая после выравненных по центру элементов блок со свойством clear: both;.

Таким образом можно добиться такого центрирования:

Выравнивание по центру блока div  

Границу зеленого цвета имеет внутренний блок с id = block-inner, прерывистую красную границу имеет внешний блок с id = block.

HTML-код примера изображенного ниже выглядит так:

<div id="page">
  <div id="block"><div id="block-inner">
    Содержимое блока
  </div></div>
</div>

CSS-код примера изображенного ниже выглядит так:

#block {
  position: relative;
  float: left;
  left: 50%;
  border: 1px dashed #a00;
}

#block-inner {
  position: relative;
  float: left;
  right: 50%;
  border: 2px solid #0a0;
  padding: 10px;
}

#page {
  overflow: hidden;
}

Пример выравнивания пунктов меню

Практически данный выше пример можно применить при горизонтальном выравнивании меню сайта. Однако, при этом нужно принять во внимание то, что при достаточно большом количестве пунктов (занимающих по ширине больше половины страницы) появляется горизонтальная прокрутка. Чтобы от нее избавиться нужно во внешнем блоке применить свойство overflow. Если меню выпадающее, то его выпадающие пункты могут срезаться этим внешним блоком. Чтобы избежать этой проблемы, необходимо применять свойство overflow к блоку как можно более объемлющему, например, самому внешнему блоку, обрамляющего все содержимое страницы.

Например можно выравнять меню так:

Выравнивание по центру пунктов меню со свойством float

Границу зеленого цвета имеют пункты li списка ul, прерывистую красную границу имеет список ul.

HTML-код примера изображенного ниже выглядит так:

<div id="page">
  <ul id="menu">
    <li><a href="#">Выравненный пункт 1</a></li>
    <li><a href="#">Выравненный пункт 2</a></li>
    <li><a href="#">Выравненный пункт 3</a></li>
    <li><a href="#">Выравненный пункт 4</a></li>
    <li><a href="#">Выравненный пункт 5</a></li>
  </ul>
</div>

CSS-код примера изображенного ниже выглядит так:

#menu {
  position: relative;
  float: left;
  left: 50%;
  border: 1px dashed #a00;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  position: relative;
  float: left;
  right: 50%;
  border: 2px solid #0a0;
  padding: 10px;
}

#page {
  overflow: hidden;
}

Так что все довольно просто. Желаю успехов в освоении новых методов.  

Ваша оценка: Нет Средняя: 7.6 (57 голосов)

Комментарии

Отличная идея!

Спасибо огромное ото я змучался..

 Мне кажется, что лучшим вариантом выравнивания тегов div будет использование стиля display со значениями table, table-row, table-cell...

В настоящее время, когда еще довольно много пользователей сети используют устаревшие браузеры типа IE6 - такой способ с table-row - не подходит. В статье же описан кроссбраузерный метод выравнивания блоков, поэтому лучше использовать именно его.

Очень Спасибо

ГЕНИАЛЬНО!

Подскажите как в таком варианте "Пример выравнивания пунктов меню" сделать текст "Пункт один" в две строки и выровнять его по центру вертикально? причем часть пунктов может быть в одну строку...

Я уже замучался)

 списибо большое. Ие 8 выеб..ся. Помог 1 способ.

Для дримвьювере в представлении "дизайн" выравнивание внешними тегами div с внутренним блоком display:table-row будет корректнее, чем кроссплатформа.

Здравствуйте. А красная прерывистая линия убирается?

 Конечно, она всего лишь показывает положение элемента ul.

 Спасибо Вам большое, пол дня отдала на то чтобы меню выровнять по центру, а тут на тебе!!! Все очень легко оказалось!

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

вот так

<div class="main">

 <div class="block">текст</div>

<div class="block">текст</div>

<div class="block">текст</div>

</div>

 

.main {

width:100%;

display:flex;

}

.block {

-webkit-flex: 1;
flex: 1;

}

в этом варианте ширина блоков будет вычисляться авотоматом в зависимости от ширины main

Наконец-то нашел то, что надо было. Ни без танцев с бубнами, но все-таки смог выровнять по центру элементы Tabs в Page Builder CK. Спасибо за гениальную и простую идею :)

 Еще как вариант:

<div class="main">
  <div class="block">текст</div>
  <div class="block">текст</div>
  <div class="block">текст</div>
</div>

 

.main {
  text-align: center;
}

.block {
  display: inline-block;
  vertical-align: top;
  text-align: left; /* Если надо выравнить по левому краю внутри каждого блока */
}

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

Содержание этого поля будет показано только администраторам сайта.