Выравнивание элементов. Способы вертикального выравнивания по центру в CSS
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
если для элемента не заданы размеры и он не пустой
Some text here
Влад Мержевич
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
|
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
Пример 2. Использование valign
| Колонка 1 | Колонка 2 |
В данном примере характеристики ячеек управляются с помощью параметров тега
Пример 3. Применение стилей для выравнивания
| Колонка 1 | Колонка 2 |
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
 |
(18.6) |
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Пример 5. Выравнивание полей формы
В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .
От автора: вновь приветствую вас на страницах нашего блога. В сегодняшней статье я бы хотел рассказать о различных приемах выравнивания, которое можно применять как к блокам, так и к их содержимому. В частности, как выровнять блоки в css, а также о выравнивании текста.
Выравнивание блоков по центру
В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:
#header{ width / max - width : 800px ; margin : 0 auto ; |
Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!
Выравнивание текста
Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.
Выравнивание текста по вертикали
А вот это уже посложнее. По умолчанию нет такого простого общеизвестного свойства, которое бы легко центрировало текст в блочной контейнере по вертикали. Однако есть несколько приемов, которые за годы работы придумали верстальщики.
Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:
div{ background: #ccc; padding: 30px 0; }
div { background : #ccc; padding : 30px 0 ; |
Фон просто для того, чтобы визуально видеть края, а также внутренние отступы. Теперь высоту блока составляют два этих отступа и сама строка, а выглядит все это так:
Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.
div{ height: 60px; line-height: 60px; }
div { height : 60px ; line - height : 60px ; |
Результат будет аналогичен вышеприведенной картинке. Все будет работать, даже если вы добавите внутренние отступы. Однако, только для одной строки. Если вам нужно больше текста в элементе, то данный способ работать не будет.
Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:
div{ display: table-cell; vertical-align: middle; }
div { display : table - cell ; vertical - align : middle ; |
Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.
Ну вот мы и подошли к последнему на сегодня приему – это выравнивание самих блоков по вертикали. Нужно сказать, что тут опять же нет свойства, которое предназначалось бы специально для этого, но есть несколько приемов, о которых вы должны знать.
Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.
Этот способ позволяет сделать центровку только когда размеры позволяют сделать вычисления. А если у вас родитель 887 пикселей в высоту, то точно записать ничего не получится, это и так понятно.
Вставить элемент в ячейку таблицы. Опять же, если мы преобразуем родительский элемент в ячейку таблицы, то вставленный в него блок автоматом отцентрируется по вертикали. Для этого родителю всего лишь нужно задать vertical-align: middle.
А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!
При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.
Но вначале основы:
Выравнивание по горизонтали средствами CSS
Class-name{
margin:0 auto;
width:200px;
height:200px;
}
Для центрирования div только по горизонтали, необходимо указать ширину и автоматическое значение для левого и правого margins (это сокращенная форма написания CSS-свойств). Этот метод работает на блочных элементов (div, p, h1 и т. п.). Чтобы применить его для линейных элементов (например, гиперссылок и изображений), необходимо написать еще одно правило — display:block .
Выравнивание по горизонтали и вертикали средствами CSS
Одновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div .
Class-name{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
С помощью абсолютного позиционирования элементов, мы можем выдернуть его из потока и задать его позицию по отношению к окну браузера. Задав смещение div на 50% от левой и верхней части окна, мы центрируем левый верхний угол относительно страницы. Единственное, что нам осталось сделать, это сместить div влево и вверх на половину его ширины и высоты, задав отрицательные значения margin , чтобы он идеально располагался по центру.
Выравнивание по горизонтали и вертикали с помощью jQuery
Как уже говорилось, вышеуказанный метод CSS работает только с div -ом фиксированного размера. На помощь приходит JQuery:
// объявление функции:
$(window).resize(function(){
$(".class-name").css({
position:"absolute",
left: ($(window).width() - $(".class-name").outerWidth())/2,
top: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// вызов функции:
$(window).resize();
Функция вычисляет ширину окна в $(window).resize() всякий раз при каждом изменении размера окна пользователем. Мы используем outerWidth() и outerHeight() , потому что в отличие от обычной width() и height() , они добавляют padding и ширину border , возвращая размер. Наконец, мы адаптируем при изменении размеров окна и центрируем div при перезагрузке страницы.
У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.
Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.
Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.
Vertical-Align
Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .
Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .
Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.
- Текст центрируется относительно line-height (межстрочный интервал).
- Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.
К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .
Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.
Межстрочный интервал или Line-height
Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.
По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.
В данном случае высоту родительского элемента указывать необязательно.
#child { line-height: 200px; }
Данный метод работает во всех браузерах, однако не забывайте, что его стоит использовать для строчки текста. Если ваш текст занимает более одной строки, примените другой метод. Значение свойства line-height может быть любым, но не меньше чем высота шрифта. На практике данный метод отлично подходит для центровки горизонтального меню.
CSS Метод с использованием свойств таблиц
Как я уже писал, содержимое ячейки можно центрировать с помощью свойства CSS vertical-align . Родительский элемент необходимо представить как таблицу, дочерний элемент обозначим как ячейку и применим к нему свойство vertical-align со значением middle . Таким образом, любой контент в элементе-потомке будет центрирован по вертикали. Css код приведен ниже.
#parent { display: table;} #child { display: table-cell; vertical-align: middle; }
К сожалению, данный метод не работает в старых версиях браузера IE. Если вам требуется поддержка браузера IE6 и ниже, добавьте объявление display: inline-block дочернему элементу.
#child { display: inline-block; }
Абсолютное позиционирование и отрицательное поле
Данный метод предназначен для элементов блочного уровня и работает во всех браузерах. Необходимо задать высоту элементу, который необходимо центрировать.
Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.
#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }
Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.
Наша задача: подвинуть дочерний элемент вверх и влево, относительно родительского элемента так, чтобы визуально дочерний элемент центрировался по вертикали и горизонтали. Именно поэтому требуется знать высоту и ширину дочернего элемента.
Итак, нам следует задать дочернему элементу отрицательное верхнее и левое поле равное половине, соответственно, ширине и высоте дочернего элемента.
В отличие от первых двух методов, данный метод предназначен для элементов блочного уровня. Метод работает во всех браузерах, однако контент может превысить высоту родительского элемента и выйти за его пределы. Данный метод лучше всего работает, когда высота и ширина элементов зафиксирована.
Абсолютное позиционирование дочернего элемента
Как и в предыдущем методе, родительский и дочерний элемент позиционируются, соответственно, относительно и абсолютно.
В коде CSS я центрирую дочерний элемент и по вертикали и по горизонтали, однако вы можете использовать только центрирование по вертикали.
#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }
Идея данного метода в том, что можно позиционировать дочерний элемент, используя значения свойств top , left , right , bottom равные 0. Так как наш элемент-потомок меньше родительского элемента, он не сможет «прилипнуть» к элементу родителю.
Значения полей для всех четырех сторон дочернего элемента равны нулю, благодаря этому элемент центрируется по вертикали относительно родителя. К сожаления данный метод имеет те же недостатки, что и предыдущий метод: необходимо фиксировать высоту и ширину потомка, отсутствие поддержки старых браузеров IE.
Нижний и верхний отступы равны
В этом методе мы явно назначаем родительскому элементу равные отступы (нижний и верхний), благодаря этому дочерний элемент визуально центрируется по вертикали.
#parent { padding: 5% 0; } #child { padding: 10% 0; }
Я использую относительные размеры. Если размеры блоков зафиксированы, то понадобится произвести некоторые математические расчеты.
Например, если элемент-родитель имеет высоту 400px, а дочерний 100px, то следует установить верхний и нижний отступ по 150px.
150 + 150 + 100 = 400
Плавающий div
В этом методе задействован пустой плавающий (float) блок, который контролирует вертикальное положение дочернего элемента. Плавающий блок div необходимо поставить перед дочерним элементом, смотрите код HTML ниже.
#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }
Сначала мы сдвигаем плавающий блок влево (или вправо) и назначаем ему высоту 50% от родительского элемента. Таким образом, плавающий блок заполнит верхнюю половину родительского элемента.
Так блок плавающий, то он удален из общего потока документа, следовательно, дочернему блоку следует назначить свойство clear со значением both . Я поставил значение both , однако вы можете использовать то значение, которое совпадает с направлением позиционирования плавающего элемента.
Сейчас верхний край дочернего элемента лежит непосредственно под нижним краем плавающего элемента. Нам требуется приподнять дочерний элемент на половину высоты плавающего элемента. Для этого достаточно установить для плавающего блока отрицательное нижнее поле равное 50%.
Работает во всех браузерах. Недостаток метода в том, что необходим пустой блок и требуется знать высоту дочернего элемента.
Windows PhoneSony Xperia Z, Z1, Z2, Z3, Z5 — как не запутаться, перечисляя модификации смартфонов, выпущенные за последние 3 года? И это не считая версий вроде Compact, Ultra или Premium, которые тоже существуют в линейке японской марки. Чтобы жить было интереснее и
Любой пользователь интернета, использует возможности интернета по своим нуждам, кому-то он нужен для развлечений, кому-то для связи с друзьями, родными и близкими людьми, а кто-то приходит сюда для того чтобы зарабатывать, а возможно и для того, чтобы вес
Добрый день.Аккумуляторная батарея есть абсолютно в каждом ноутбуке (без нее немыслимо представить себе мобильное устройство).Случается иногда так, что она перестает заряжаться: и вроде бы ноутбук подключен к сети, и все светодиоды на корпусе моргают, да
Последние материалы