Горизонтальное и вертикальное выравнивание элементов на CSS. Вертикальное выравнивание в div. Бонус: условные комментарии

Выравнивание различных элементов, как на сайте или странице изначально идет для кого то сложной задачей, что качается выравнивание текста по вертикали. Как ни странно, одним из наиболее сложных способов использования CSS является центрирование контента. Центрирование контента по горизонтали относительно легко в некоторые моменты времени. Центрирование содержимого по вертикали затруднено почти всегда. Центрирование различного элемента, что нужно выставить по вертикале при помощи CSS. Это безусловно очень часто задаваемый вопрос, который создает проблемы дизайнеров и веб мастерам. Тем не менее существует множество методов для выполнения центрирование по вертикале, и каждый из них довольно прост в использовании.

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

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

Первый метод с line-height

Первый способ идет простой и в чем то банален, где есть свои недостатки что будет идти ограничение в применении. При кодировании html страниц для сайта междустрочный интервал текстового содержимого, вероятно, является одним из атрибутов, который обычно остается по умолчанию. Вообще нам нужно задать высоту самой строки, которая идет с аналогичной высотой для блока, где используется line-height свойство.

Это первый метод, что показан на демонстраций

CSS

Constutesim_first {
border: 2px solid #bf1515;
height: 175px;
}
.constutesim_first > p{
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
}

Также вы можете сразу посмотреть, как все в реальности будет выглядеть.

Аналогичным методом, есть возможность реализовать, как выставить изображение, что будет по центру и безусловно по вертикали. Здесь остается только прописать одно свойство vertical-align: middle; которое отвечает за вывод картинки.

Вторая вариация, которая идет с изображением

CSS

Second-variation{
border: 2px solid red;
line-height:158px;
}

Second-variation div{
text-align:center;
}
.second-variation img {
vertical-align: middle;
border: 0px solid #3a3838;
}

Реализуем снимки изображений по центру и вертикали.

Выравнивание со свойством position

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

Cherevert-variation {
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
}

Cherevert-variation div{
display: table-cell;
vertical-align: middle;
text-align:center;
}

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

Выравнивание со свойством flex

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

Выравнивание со свойством transform

CSS

Vertical-medilpasudsa {
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
}
.vertical-medilpasudsa > div{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}

Когда вы укажете значения в виде числа, он будет основываться на текущем размере шрифта в качестве базы. Текущий размер шрифта умножается на число, которое вы указываете для вычисления высоты линии или пробела между строками.

Если вы хотите центрировать знаки по горизонтали в элементе, вы должны использовать text-align: center. Один из вариантов, если вы хотите центрировать его по вертикали, и у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.

Если вам нужно центрировать текст внутри элемента, такого как div, header или paragraph, вы можете использовать свойство text-align CSS.

Text-align имеет несколько допустимых свойств:

Center: Текстура центрирована;
left: Будет выравниваться с левой стороны контейнера;
right: Выровнен с правой стороны контейнера
justify: Вынужден ровняться, как с левой, так и с правого края контейнера, за исключением крайних строк;
justify-all: Заставляет крайнее строку оправдывать знаки;
start: То же самое, что по левую, только если направление идет с лева на правую сторону. Но правильно будет, если изначально задать направление текстового направление, что произойдет справа налево;
End: Противоположность начала;
match-parent: Аналогично наследованию, кроме начала и конца, вычисляется относительно родительского элемента;

Используйте эти свойства для выравнивания текста внутри родительского или оберточного div. Если вы хотите центрировать текст по горизонтали в элементе, вы должны использовать text-align: center.

Один из вариантов, если вы хотите центрировать его по вертикали, если у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также "за" и "против" каждого из них. Пример.

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).

Некоторая полезная информация, которая должна располагаться по центру. #wrapper{ display: table; } #cell{ display: table-cell; vertical-align: middle; }

Плюсы

Контент может динамически изменять высоту (высота не определена в CSS).
Контент не обрезается в случае, если для него недостаточно места.

Минусы

Не работает в IE 7 и меньше
Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div -а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div -а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Content Here #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; /* минус от половины высоты */ }

Плюсы

Работает во всех броузерах.
Нет лишней вложенности.

Минусы

Когда не достаточно места, контент пропадает (например, div находится внутри body , а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div -ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

здесь контент #floater{ float: left; height: 50%; margin-bottom: -120px; } #content{ clear: both; height: 240px; position: relative; }

Плюсы

Работает во всех броузерах.
Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div -а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0; , но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Важная информация. #content{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; width: 70%; }

Плюсы

Очень просто.

Минусы

Не работает в Internet Explorer
Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Какая-то строка текста #content{ height: 100px; line-height: 100px; }

Плюсы

Работает во всех броузерах.
Не обрезает текст, если он не влез.

Минусы

Работает только с текстом (не работает с блочными элементами).
Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

#floater (чтобы выровнять контент по центру)
#centred (центральный элемент)
- #side
  - #logo
  - #nav (список
  - #content
- #bottom (для копирайтов и всего такого)
Напишем следующую html-разметку:
A Centred Company A Company
- Home
- Products
- Blog
- Contact
- About
Page Title
Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
Heading 2
Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.

Copyright notice goes here

Шаг 2
Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css . Именно на него прописана ссылка в html-файле.
Html, body { margin: 0; padding: 0; height: 100%; } body { background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; } #floater { position: relative; float: left; height: 50%; margin-bottom: -200px; width: 1px; } #centered { position: relative; clear: left; height: 400px; width: 80%; max-width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; } #bottom { position: absolute; bottom: 0; right: 0; } #nav { position: absolute; left: 0; top: 0; bottom: 0; right: 70%; padding: 20px; margin: 10px; } #content { position: absolute; left: 30%; right: 0; top: 0; bottom: 0; overflow: auto; height: 340px; padding: 20px; margin: 10px; }
Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

Нижний отступ для элемента "floater"-а равен минус половине высоты контента (400px), а именно -200px ;

Сейчас ваша страничка должна выглядеть приблизительно так:

Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

Поскольку элементу #centered установлено position:relative , мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content , чтобы появлялись скроллбары, в случае если не будет помещаться контент.
Шаг 3
И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.
#nav ul { list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; } #nav li { padding: 0; margin: 3px; } #nav li a { display: block; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; } #nav li a::after { content: "»"; color: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px; } #nav li a:hover, #nav li a:focus { background: #f8f8f8; border-bottom-color: #777; } #nav li a:hover::after { margin: 0 0 0 7px; color: #f93; } #nav li a:active { padding: 8px 7px 6px 7px; }
Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none , а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.

Другая интересная вещь, которую мы использовали для меню - это псевдо-классы:before и:after . Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Шаг 4
Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.
#centered { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666; } h1 { color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; } #bottom { padding: 10px; font-size: 0.7em; color: #f03; } #logo { font-size: 2em; text-align: center; color: #999; } #logo strong { font-weight: normal; } #logo span { display: block; font-size: 4em; line-height: 0.7em; color: #666; } p, h2, h3 { line-height: 1.6em; } a { color: #f03; }
В этих стилях мы устанавливаем закруглённые углы для элемента #centered . В CSS3, за это будет отвечать свойство border-radius . Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

Совместимость
Как вы уже наверное предположили, основной источник проблем совместимости - Internet Explorer:
- Элементу #floater обязательно надо установить ширину
- В IE 6 лишние отступы вокруг меню
237154 просмотра
CSS ,
HTML

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

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

таблицы,
отступов,
line-height ,
растягивания,
отрицательного margin ,
transform ,
псевдоэлемента,
flexbox .

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

.outer-wrapper { display: table; } .outer { display: table-cell; }
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
http://jsfiddle.net/c1bgfffq/6/

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

Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
http://jsfiddle.net/c1bgfffq/15/

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

Для этого нужно:

задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
установить значение auto для вертикальных отступов внутреннего блока.

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
http://jsfiddle.net/c1bgfffq/13/

Минус данного способа - должна быть известна высота внутреннего блока.

Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
http://jsfiddle.net/c1bgfffq/14/

Минус данного способа − Flexbox поддерживается только современными браузерами.

Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

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

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem { margin-left: auto; margin-right: auto; width: 50%; }

Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align .wrapper { text-align: center; }

Я выровнен по центру

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }

Я выровнен по центру

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

Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }

Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.

line-height .wrapper { height: 100px; line-height: 100px; }

Я выровнен по вертикали

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }

Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :

Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }

Я выровнен по вертикали

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:

Function alignCenter(elem) { // код здесь }

В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:

Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }

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

Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:

$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })

Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:

Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

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

Начнем с общего описания задачи.

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

Нужный текст

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

Выше упоминалось, что свойство vertical-align применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align для вертикального центрирования содержания.

Примечание: Таблица CSS не является тем же, что и HTML таблица.

Содержание

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

Мы устанавливаем табличный вывод для родительского элемента div , а вложенный элемент div выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.

В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div будет изменять размер в соответствии со своим содержанием.

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

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

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

Содержание

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

В коде примера выполняется центрирование по вертикали и горизонтали.

Содержание

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

Содержание

#parent { padding: 5% 0; } #child { padding: 10% 0; }

В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

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

Содержание

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

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