Типы позиционирования в CSS
В HTML каждый элемент представляет собой некий прямоугольник, для которого необходимо указать внешние и внутренние отступы, а также границу, разделяющую их.
Схемы позиционирования определяют, где этот прямоугольник должен находиться и как должен влиять на окружающие его элементы.
В CSS свойство position может принять пять значений:
- relative;
- absolute;
- inherit;
- fixed;
- static.
Все элементы веб-страницы по умолчанию позиционируются значением static. Это означает, что каждый элемент расположен в соответствии с естественным порядком добавления на страницу. Элементы блоков располагаются под элементами блоков, строчные — друг за другом.
Абсолютное позиционирование
Данный тип позиционирования удаляет элемент в общем потоке документа. Окружающие элементы игнорируют искомый так, будто ему присвоено свойство display: none;.
В том случае, если вы не хотите, чтобы пространство заполнялось другими элементами, вам нужно установить абсолютное позиционирование для элемента, указав свойства left, right, bottom и top. Если не указано ни одно свойство, для пары top-left присваивается значение 0.
Ключевым моментом абсолютного позиционирования является понимание точки отсчёта: такие элементы позиционируются относительно самого близкого родительского элемента с позиционированием, отличным от static. В том случае, если ближайший элемент не существует, позиционирование происходит относительно основного документа.
Относительное позиционирование
Элементы с относительным позиционированием располагаются относительно собственной позиции (сдвиг на основе своего стандартного месторасположения). При сдвиге изображения на его месте остаётся образ, относительно которого все элементы располагаются и накладываются друг на друга.
Относительно позиционированные элементы берутся из нормального потока, однако по-прежнему оказывают некоторое влияние на расположение элементов по соседству, ведущих себя так, что в потоке документа исходный элемент всё ещё существует.
Для использования этого вида позиционирования, необходимо для свойства position указать значение relative:
- Данный тип позиционирования не применим к табличным элементам (строки, колонки, ячейки и т. д.);
- Место, которое элемент занимал до смещения, не заполняется выше- или ниже располагающимися элементами и остаётся пустым.
Для того чтобы позиционирование дочернего элемента выполнялось относительно родительского, для первого необходимо указать свойство position: absolute, а для второго — position: relative:
Фиксированное позиционирование
Данная схема позиционирования напоминает схему абсолютного позиционирования, однако имеются небольшие различия:
- Фиксировано позиционированный элемент всегда игнорирует родительские элементы и располагается относительно окна браузера;
- При пролистывании страницы элемент не смещается.
Зачастую фиксированное позиционирование применяется для создания вкладок, меню, заголовков и любых прочих элементов, которые должны быть постоянно видны пользователю сайта.
Z-Index
Веб-страницы являются двухмерными элементами, имея значения ширины и высоты, а свойство z-index добавляет странице глубину. Чем больше значение z-index, тем «выше» располагается элемент на странице, и наоборот, элемент с меньшим значением z-index находится за элементом с более высоким значением.
Таким способом можно добиться некой объёмности страницы.
Позиционирование фона
По умолчанию background (фон) страницы появляется в верхнем левом углу страницы, однако часто возникают ситуации, в которых необходимо задать конкретную позицию данного элемента (например, в том случае, если задний фон представляет собой большое изображение, занимающее всю страницу и, в отличие от контента, прокручиваться не должен).
Позиционирование фона страницы осуществляется при помощи свойства background-position, значениями которого могут являться процентные соотношения, числовые значения в разных единицах измерения, определённые ключевые слова.
Например:
- background-position: center left;
- background-position: bottom right;
- background-position: 20% 90%;
- background-position: 40px 40 px.
Процентные значения можно использовать совместно с единицами измерения: при указании одного параметра, второй автоматически принимает значение 50%.
Перечисленные схемы позиционирования определяют влияние элемента на соседние и правила его размещения на веб-странице.
Чаще всего при вёрстке используют свойство float, применяя позиционирование лишь для тех элементов, которые необходимо выделить из общего потока.
На сегодня это все. Удачи Вам!
АМАнтон Малаховавтор
Решение задачи
Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:
Это какой-то проверочный текст. Он состоит из двух строк.
Для div-контейнера класса textalign
задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):
Display: table-cell;
vertical-align: middle;
И еще два свойства, которые задают ширину и высоту для блока:
Width:500px;
height: 500px;
Этого вполне достаточно для выравнивания содержимого контейнера по центру относительно вертикали, во всех браузерах кроме IE
.
Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE
(именно для них мы использовали дополнительные блоки div
и span
):
Обращаемся к тегу div
внутри блока класса textalign
. Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.
Textalign div{
position: absolute;
top: 50%;
}
Соответственно, стили заданные для блока textalign
видоизменяются:
Textalign{
display: table-cell;
vertical-align: middle;
width:500px;
height: 500px;
position: relative;
}
Теперь левая верхняя точка текстового блока смещена вниз на 50%.
Для пояснения происходящего я нарисовал иллюстрацию:
Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока
, а не его верхняя левая точка.
Теперь в ход пойдет тег span
и его относительное позиционирование:
Textalign span{
position: relative;
top: -50%;
}
Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!
Относительно чего позиционируем?
Чтобы спозиционировать себя, элемент должен знать две вещи:
- какой родитель станет точкой отсчета;
- величину смещения относительно точки отсчета (сверху, снизу, справа или слева).
Если определить position: absolute для box-4 , этот элемент покинет нормальный поток документа . Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).
Теперь добавим свойства top: 0 и left: 0 . Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3 , ни box-2 , ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).
Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):
Если установить position: relative для элемента box-1 , точкой отсчета станет он:
Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.
Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.
Если установить position: relative также для box-2 , то box-4 будет позиционироваться относительно него, ведь этот предок ближе.
Аналогично и для контейнера box-3:
Для вёрстки страниц часто используются два основных инструмента — позиционирование (positioning)
и свободное перемещение (floating)
. CSS-позиционирование позволяет указать, где появится блок элемента, а свободное перемещение перемещает элементы к левому или правому краю блока-контейнера, позволяя остальному содержимому «обтекать» его.
Из стопки в ряд
Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.
XHTML
<div class=»row»>
<div class=»col-sm-8″>col-sm-8</div>
<div class=»col-sm-4″>col-sm-4</div>
</div>
<div class=»row»>
<div class=»col-sm»>col-sm</div>
<div class=»col-sm»>col-sm</div>
<div class=»col-sm»>col-sm</div>
</div>
|
1 |
<div class=»row»> <div class=»col-sm-8″>col-sm-8</div> <div class=»col-sm-4″>col-sm-4</div> </div> <div class=»row»> <div class=»col-sm»>col-sm</div> <div class=»col-sm»>col-sm</div> <div class=»col-sm»>col-sm</div> </div> |
Настройка
Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Селекторы CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1> Селекторы CSS</h1>
<p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</body>
</html>
Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.
Выравнивание блока по левому или правому краю
Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой — с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:
- .left {float:left;}
- .right{float:right}
Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:
- .left {float:left;}
- .right{float:right}
- footer {clear:both}
Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.
Возможные проблемы с выровненными блоками
Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:
- .second{float:left}
- .third{float:right}
- .clearfix{height:0; clear: both;}
Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):
- .left{float:left}
- .right{float:right}
- .container:after{content:»»; display:table; clear:both;}
Приведенные выше варианты — самые распространенные, хотя вариаций существует несколько. Всегда можно найти наиболее простой и удобный способ создания псевдораспорки путем экспериментов.
Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.
Если разрезать любой сайт, созданный на основе html
, то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div
по центру вашего сайта:
Центровка в блоке переменной высоты
Очень часто встречается необходимость задать высоту блока класса textalign
не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.
Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign
превращается именно в ячейку таблицы, благодаря свойству display:table-cell
).
В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table
и уже для него задавать процентное значение высоты. Тогда вложенный в него блок, с CSS-директивой display:table-cell
, благополучно унаследует высоту родительского блока.
Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:
Классу textalign
мы изменим значение свойства display
с table-cell
на table
и убирем директиву выравнивания vertical-align: middle
. Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.
Таким образом, CSS-свойства для блока класса textalign
будут иметь следующий вид:
Textalign{
display: table;
width:500px;
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid black;
}
Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign
(это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell
, тогда он унаследует высоту в 100% от родительского блока textalign
(фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle
.
Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign
.
Textalign div{
display: table-cell;
vertical-align: middle;
}
Вот и вся хитрость. При желании, вы можете переменной высоты с отцентрованным содержимым.
Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить .
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
Метод таблиц CSS
Выше упоминалось, что свойство vertical-align
применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align
для вертикального центрирования содержания.
Примечание:
Таблица CSS не является тем же, что и HTML таблица.
CSS:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Мы устанавливаем табличный вывод для родительского элемента div
, а вложенный элемент div
выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align
для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.
В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div
будет изменять размер в соответствии со своим содержанием.
Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block
для вложенного контейнера.
Работа с Flexbox-версткой
Flexbox считается сложным способом верстки веб-макетов. Но если вы ее освоите, то поймете, что она гораздо проще и приятнее, чем стандартное способы форматирования. Спецификация Flexbox — это гибкий и невероятно мощный способ обработки элементов. С английского языка название модуля так и переводится, как «гибкий контейнер». Значения ширины, высоты, расположения элементов настраиваются автоматически, без вычисления отступов и полей.
В предыдущих примерах мы уже работали со свойством display, но задавали ему блочное (block) и строчное (inline-block) значение. Для создания flex-макетов мы будем использовать display: flex. Сначала нам понадобиться flex-контейнер:
Чтобы преобразовать его во флекс-контейнер в каскадных таблицах, мы пишем:
Flex-container{
display: flex;
}
Все вложенные в него объекты, но только прямые потомки, будут являться flex-элементами:
Первый
Второй
Третий
Четвертый
Если вовнутрь flex-контейнера поместить список, то пункты списка li не считаются flex-элементами. Flexbox-верстка будет действовать только на ul:
По вертикали
С вертикальным центрированием в CSS все немного сложнее:
Это элемент строчного типа или строчно-* (как текст или гиперссылки)?
Он помещается в одну строку?
Иногда строчные/текстовые элементы могут выглядеть отцентрированными по
вертикали только потому, что у них одинаковые верхнее и нижнее поля ().
Если использование полей по какой-либо причине невозможно, а вы хотите
отцентрировать текст, который точно не будет переноситься в следующую строку,
можно использовать хитрость с установкой равной высоте элемента,
это отцентрирует текст:
Элемент занимает несколько строк?
Центрирование нескольких строчек текста также можно сделать с помощью
установки одинаковых верхнего и нижнего полей, однако, если этот вариант вам не
подходит, можно сделать элемент, в который помещён текст, ячейкой таблицы —
буквально или же просто её имитацией на CSS. За центрирование в этом
случае отвечает свойство , несмотря на то, что обычно
он просто выравниванивает по горизонтали элементы в ряду. (Более подробно об этом.)
Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать
flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во
flex-родителе.
Помните, что этот способ подходит только если у родительского контейнера указана
конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.
Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при
котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст
выравнивается по горизонтали по этому элементу:
Это блочный элемент?
Вам известна высота элемента?
Обычно, когда речь идёт о веб-странице, высота может быть неизвестна
по многим причинам: если изменяется ширина элемента, перераспределение текста
может изменить высоту. Вариации в стилизации текста могут
изменить высоту. Изменение количества текста может
изменить высоту элемента. Элементы с фиксированным соотношением сторон, например,
изображения, могут изменить высоту при масштабировании — и так далее.
Но, если вам известна высота, вертикальное центрирование можно сделать так:
Плавающий div
Данный метод использует пустой элемент div, который плавает и помогает управлять положением нашего вложенного элемента в документе
Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML
CSS:
#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 и знаний о высоте вложенного элемента.
Горизонтальное выравнивание
Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end
Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место
XHTML
<div class=»container»>
<div class=»row justify-content-start»>
<div class=»col-4″>
По левому краю
</div>
<div class=»col-4″>
По левому краю
</div>
</div>
<div class=»row justify-content-center»>
<div class=»col-4″>
По центру
</div>
<div class=»col-4″>
По центру
</div>
</div>
<div class=»row justify-content-end»>
<div class=»col-4″>
По правому краю
</div>
<div class=»col-4″>
По правому краю
</div>
</div>
<div class=»row justify-content-around»>
<div class=»col-4″>
Around
</div>
<div class=»col-4″>
Around
</div>
</div>
<div class=»row justify-content-between»>
<div class=»col-4″>
Between
</div>
<div class=»col-4″>
Between
</div>
</div>
</div>
|
1 |
<div class=»container»> <div class=»row justify-content-start»> <div class=»col-4″> По левому краю </div> <div class=»col-4″> По левому краю </div> </div> <div class=»row justify-content-center»> <div class=»col-4″> По центру </div> <div class=»col-4″> По центру </div> </div> <div class=»row justify-content-end»> <div class=»col-4″> По правому краю </div> <div class=»col-4″> По правому краю </div> </div> <div class=»row justify-content-around»> <div class=»col-4″> Around </div> <div class=»col-4″> Around </div> </div> <div class=»row justify-content-between»> <div class=»col-4″> Between </div> <div class=»col-4″> Between </div> </div> </div> |
CSS — Выравнивание по горизонтали
1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:
…
…
Block {
margin-left: auto;
margin-right: auto;
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:
…
…
Parent {
text-align: center;
}
.child {
display: inline-block;
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
Инструменты центрирования в css
Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.
Итак, начнем с первого свойства центрирования текста — это text-
align
.
Оно функционирует так же, как и align в . Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit
).
Хочу отметить, что в css3 можно установить еще 2 параметра: start
– в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end
– противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).
text-align
Предложение справа
Предложение c использованием end
Расскажу о небольшой фишке. При выборе значения justify
последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last
.
Для выравнивания содержимого сайта или ячеек таблиц по вертикали используется свойство vertical-align
. Ниже я описал основные ключевые слова элемента.
| Ключевое слово | Предназначение |
|
baseline |
Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у. |
|
middle |
Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя. |
|
bottom |
Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех. |
|
top |
Аналогично bottom, только с верхней частью объекта. |
|
super |
Делает символ надстрочным. |
|
sub |
Делает элемент подстрочным. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
vertical-align |
vertical-align
ЦВЕТОК
Динамическое выравнивание элемента на странице
Мы рассмотрели способы выравнивания элементов на странице при помощи 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»
})
}
})
CSS — Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
…
…
Parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
Parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
/* ширина и высота 2 блока */
width: 500px;
height: 250px;
/* Значения определяются в зависимости от его размера */
/* margin-left = — width / 2 */
margin-left: -250px;
/* margin-top = — height / 2 */
margin-top: -125px;
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
Parent {
position: relative;
}
.child {
position: absolute;
/* ширина и высота 2 блока в % */
height: 50%;
width: 50%;
/* Значения определяются в зависимости от его размера в % */
left: 25%; /* (100% — width) / 2 */
top: 25%; /* (100% — height) / 2 */
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
