Отцентрировать блок по горизонтали и вертикали
Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы.
Отцентировать по горизонтали
Способ 1
Через margin: auto;, задав ширину < ширины родителя.
.center {
margin: auto;
width: 50%;
}Способ 2
Через margin: auto; display: table;. Преимущество второго способа — ширина таблицы может быть динамической.
.center {
margin: auto;
display: table;
}Отцентировать по вертикали
Способ 1
Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты.
<div>
<p>Content here</p>
</div>
.vcenter {
display: table;
}
.vcenter p {
display: table-cell;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}Или так:
<div>Content here</div>
.vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}Но при этом варианте родительский блок получит табличный алгоритм вычисления ширины (иметь ширину содержимого), а это не всегда желательно. Чтобы растянуть блок, нужно указать ширину явно, например width: 300px. В данном примере указать в процентах не получится, т.к. ячейка есть, а родительской таблицы — нет.
Способ 2
Второй вариант вертикального выравнивания базурется на использовании трансформаций:
<main>
<div>Content centered vertically</div>
</main>
main { position: relative
main div {
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
} Способ 3
Использовать возможности flexbox:
<div>Centered content with flexbox</div>
.vcenter {
display: flex;
justify-content: center;
align-items: center;
}Если центруемых элементов в контейнере будет несколько, то они онтцентрируются по вертикали и горизонтали и будут располагаться рядом.
Способ 4
Можно задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto:
<div><div>Centered text</div></div>
.container { display: flex; }
.message { margin: auto; }В этом случае элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали. Если элементов будет несколько, то между ними будут равномерные отступы (похожие на justify-content: space-around).
В заключение: сборник решений от CSS Tricks.
Центрирование резинового блока по горизонтали
Подготовили: Татьяна Шкабко, Александр Головко Дата публикации: 30.07.2010
Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:
Тут все просто. Самое долгое в верстке этого блока — вырезать фотографию. Давай немного усложним задачу: ссылка должна выглядеть как кнопочка (т.е. иметь фон). Например, такой:
Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?
Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!
Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…
Пробуем включить мозг. Итак:
- Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
- Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
- Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!
То есть я не могу сделать ссылку строчной, потому что у нее есть высокая фоновая картинка, и не могу выровнять резиновую блочную ссылку по центру. Ни display: inline, ни display: block в этом случае не подходят. Вот если бы было так, чтобы одновременно и по центру как display: inline и с картинкой, как display: block…
А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.
Таким образом, решением данной задачи будет следующий код:
<div> <div> <img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" /> </div> <a href=../../../collect/html-and-css-tricks/pozitsionirovanie/"#">Комментировать<span></span></a> </div>
.parent{
text-align: center;
}
.button{
display: inline-block;
color: #fff;
position: relative;
margin: 0 auto;
line-height: 32px;
padding: 0px 6px 0 10px;
font-size: 12px;
background: url(path-to/inline-block-button.png) no-repeat;
text-decoration: none;
cursor: pointer;
}
.button span{
position: absolute;
width: 5px;
height: 32px;
right: -4px;
top: 0;
background: url(path-to/inline-block-button-cup.png) no-repeat;
}
Демонстрационный пример
Проверено в:
Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.
Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!
Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.
Решение нашей задачи с блочным элементом в главной роли:
<div> <div> <img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" /> </div> <div>Комментировать<span></span></div> </div>
.parent{
text-align: center;
}
.button{
position: relative;
margin: 0 auto;
line-height: 32px;
padding: 0px 6px 0 10px;
font-size: 12px;
background: url(path-to/inline-block-button.png) no-repeat;
text-decoration: none;
cursor: pointer;
display: inline-block;
//display: inline;
zoom: 1;
}
.button span{
position: absolute;
width: 5px;
height: 32px;
right: -4px;
top: 0;
background: url(path-to/inline-block-button-cup.png) no-repeat;
}
Демонстрационный пример
Проверено в:
- IE 6-8
- Firefox 3.0
- Opera 9.5-10.5
- Safari 4
- Chrome 5
Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.
Заметка
Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.
Выводы
Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.
Резиновый блочный элемент для всех нормальных браузеров выравнивается точно так же. Для IE6-7 алгоритм такой:
- В правилах для IE6-7 сделать элемент строчным (display: inline).
- Установить этому элементу layout.
Центрирование DIV по горизонтали и вертикали
При создании макетов веб-страниц, вы наверняка сталкивались с ситуацией, когда вам необходимо отцентрировать DIV, используя CSS, по горизонтали и вертикали. Существует несколько путей решения это проблемы, и в этой статье мы покажем вам реализацию центрирования
Горизонтальное центрирование на CSS
По классике жанра, используем свойство margin:
.className{ margin:0 auto; width:200px; height:200px; } |
Для того, чтобы отцентрировать DIV только по горизонтали, необходимо указать ширину (свойство width) этого блока и значения auto для левого и правого margin.
Этот метод работает на блочных элементах (div, параграфы, h2, и т.д.). Чтобы применить этот метод к линейным элементам (например, гиперссылки и изображения), необходимо установить дополнительное правило — display:block.
Горизонтальное и вертикальное центрирование на CSS
Центрирование DIV по горизонтали и вертикали на CSS выглядит немного сложнее. Одно условие — вам надо знать заранее размеры DIV.
.className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } |
При абсолютном позиционировании элемента, мы можем отделить его от окружающих элементов и определить позицию по отношению к окну браузера. Устанавливем позиционирование Div на 50% от левой и верхней части окна, и в результате, верхний левый угол блока будет точно в центре страницы.
Единственное, что осталось сделать, это сдвинуть блок вверх и влево на половину высоты и ширины блока, используя отрицательные значения margin.
Горизонтальное и вертикальное центрирование на jQuery
Как упоминалось ранее — метод центрирования на CSS работает только для блоков с фиксированными размерами. Здесь, в игру вступает
$(window).resize(function(){ $(‘.className’).css({ position:’absolute’, left: ($(document).width() — $(‘.className’).outerWidth())/2, top: ($(document).height() — $(‘.className’).outerHeight())/2 }); }); // To initially run the function: $(window).resize(); |
Функциональность вставлена в $(window).resize(), которая выполняется каждый раз при изменении размеров окна. Мы используем outerWidth() и outerHeight(), потому что в отличие от типичных width() и height(), они добавляют значение padding и ширину бордюра (border) к возвращаемому размеру. И в конце, вызываем событие изменение размеров окна, чтобы установить DIV точно по центру на странице загрузки.
Скачать пример
Оценка и возможное применение
Преимущество использования этого метода заключается в том, что вам не нужно знать размеров DIV. Основной недостаток в том, что данный метод не будет работать, при отключенном JavaScript. Однако, этот метод будет просто идеальным для различных пользовательских интерфейсов (таких, как Facebook).
Возможно, Вам будет интересно ↓↓↓
Центрирование резинового блока по горизонтали
Автор: Татьяна Шкабко, Александр Головко Дата публикации: 30.07.2010
Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:
Тут все просто. Самое долгое в верстке этого блока — вырезать фотографию. Давай немного усложним задачу: ссылка должна выглядеть как кнопочка (т.е. иметь фон). Например, такой:
Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?
Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!
Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…
Пробуем включить мозг. Итак:
- Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
- Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
- Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!
То есть я не могу сделать ссылку строчной, потому что у нее есть высокая фоновая картинка, и не могу выровнять резиновую блочную ссылку по центру. Ни display: inline, ни display: block в этом случае не подходят. Вот если бы было так, чтобы одновременно и по центру как display: inline и с картинкой, как display: block…
А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.
Таким образом, решением данной задачи будет следующий код:
<div> <div> <img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" /> </div> <a href="#">Комментировать<span></span></a> </div>
.parent{
text-align: center;
}
.button{
display: inline-block;
color: #fff;
position: relative;
margin: 0 auto;
line-height: 32px;
padding: 0px 6px 0 10px;
font-size: 12px;
background: url(path-to/inline-block-button.png) no-repeat;
text-decoration: none;
cursor: pointer;
}
.button span{
position: absolute;
width: 5px;
height: 32px;
right: -4px;
top: 0;
background: url(path-to/inline-block-button-cup.png) no-repeat;
}
Демонстрационный пример
Проверено в:
Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.
Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!
Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.
Решение нашей задачи с блочным элементом в главной роли:
<div> <div> <img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" /> </div> <div>Комментировать<span></span></div> </div>
.parent{
text-align: center;
}
.button{
position: relative;
margin: 0 auto;
line-height: 32px;
padding: 0px 6px 0 10px;
font-size: 12px;
background: url(path-to/inline-block-button.png) no-repeat;
text-decoration: none;
cursor: pointer;
display: inline-block;
//display: inline;
zoom: 1;
}
.button span{
position: absolute;
width: 5px;
height: 32px;
right: -4px;
top: 0;
background: url(path-to/inline-block-button-cup.png) no-repeat;
}
Демонстрационный пример
Проверено в:
- IE 6-8
- Firefox 3.0
- Opera 9.5-10.5
- Safari 4
- Chrome 5
Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.
Заметка
Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.
Выводы
Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.
Резиновый блочный элемент для всех нормальных браузеров выравнивается точно так же. Для IE6-7 алгоритм такой:
- В правилах для IE6-7 сделать элемент строчным (display: inline).
- Установить этому элементу layout.