Открыть меню    

CSS Центрирование в неизвестности

Когда речь заходит о центрировании в веб-дизайне, то чем больше информации известно о центрируемом элементе и его элементе-родителе, тем проще это центрирование выполнить. А что если о них ничего неизвестно? Однако и в этом случае центрирование осуществимо.

Не сложно: если известны размеры центрируемого элемента

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

Допустим, что нам известны длина и ширина центрируемого элемента, однако размеры его элемента-родителя непостоянны и меняют свои значения высоты и ширины.

центрируем дочерний элемент

Абсолютно позиционируем нуждающийся в центрировании элемент и устанавливаем значения свойств top и left равными 50%, а значения верхнего и левого margin (поля) установим в виде отрицательного значения половины высоты элемента (для margin-top) и половины его ширины (для margin-left).

Сложнее: о центрируемом элементе неизвестно ничего

Наибольшие проблемы вызывает ситуации, когда неизвестны размеры центрируемого элемента.

центрируем неизвестный дочерний элемент

Что нам известно? Ничего! Когда мы узнаем об этом? Сейчас!

Самым корявым способом решения этой проблемы является – использовать таблицу:

HTML


<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Центрируемый элемент.
     </td>
  </tr>
</table>

Если вас смущает семантика этого решения, можете попытаться подстроить его под ваш контент:

HTML


<div class="something-semantic">
   <div class="something-else-semantic">
       Центрируемый элемент.
   </div>
</div>

И получить тот же результат, что и с таблицами:

CSS


.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Таблицы СSS могут подойти вам, а могут и не подойти. Например, чтобы таблица растянулась на всю ширину родительского элемента ей необходимо задать ширину 100%, в то время как блочный элемент расширится до размеров родительского элемента автоматически. Также не дай бог вам захочется добавить другой контент в этот div ("something-else-semantic"), который вы затем захотите позиционировать или совершить другие действия не согласованные с действиями для ячейки таблицы.

Michał Czernow написал мне о другом интересном способе, с помощью которого можно добиться тех же результатов. Если мы установим элемент «призрак» с высотой 100% внутри родительского элемента, а затем расположим посередине, при помощи свойства vertical-align: middle, как элемент «призрак», так и центрируемый нами элемент, мы добьемся такого же эффекта.

центрируем при помощи элемента-призрака

Понятно, что мы сделали?

Нужно ли элементу «призраку» быть семантическим элементом? Нет, он может быть псевдо-элементом.

CSS


/* элемент-родитель может иметь любую ширину и высоту  */
.block {
  text-align: center;
}

/* Элемент-призрак необходим для центрирования */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
 }

/* Центируемый элемент
    может иметь любую высоту или ширину*/
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML


<div class="block" style="height: 300px;">
<div class="centered">
  <h1>Some text</h1>
  <p>But he stole up to us again, and suddenly
   clapping his hand on my shoulder, said—
 "Did ye see anything looking like men going 
 towards that ship a while ago?"</p>
</div>
</div>

Что мы сделали, и почему элемент-призрак так повлиял на вертикальное центрирование? Тайну откроет статья Центрируем по вертикали в заголовке горизонтальную линию.

Хотел бы я вам сказать, что способ с «призраком» настолько хорош, что он будет основным способом центрирования в ближайшие годы, однако это не так. В сущности, он такой же, как и трюк с таблицей. Важнейшим моментом является браузерная совместимость, а она начинается с браузеров IE8+. I7 не поддерживает псевдо-элементы (впрочем, как и CSS-таблицы). Если необходима поддержка IE <= 7, то используют <table> (или эквивалентные не семантические решения на основе <span> или других элементов для организации "призрака").

По материалам статьи centering-in-the-unknown/

Комментарии к статье

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