Центрирование блока по горизонтали css – Как отцентрировать картинку по вертикали внутри блока с динамической высотой?

Отцентрировать блок по горизонтали и вертикали

Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы.

Отцентировать по горизонтали

Способ 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 в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

  1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
  2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
  3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают 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 алгоритм такой:

  1. В правилах для IE6-7 сделать элемент строчным (display: inline).
  2. Установить этому элементу layout.

Центрирование DIV по горизонтали и вертикали

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

Горизонтальное центрирование на 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 работает только для блоков с фиксированными размерами. Здесь, в игру вступает jQuery:

$(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 в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

  1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
  2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
  3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают 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 алгоритм такой:

  1. В правилах для IE6-7 сделать элемент строчным (display: inline).
  2. Установить этому элементу layout.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *