УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Свойство box-pack


CSS Справочник Полный CSS Справочник

Пример

Центрировать дочерние элементы блока div, используя свойства box-align и box-pack:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari и Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство box-pack не поддерживается ни одним из основных браузеров.

Firefox поддерживает альтернативное свойство -moz-box-pack.

Safari и Chrome поддерживают альтернативное свойство -webkit-box-pack.


Определение и Использование

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

Это свойство указывает горизонтальное положение в горизонтальных блоках и вертикальное положение в вертикальных блоках.

Значение по умолчанию: start
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.boxPack="center"


Синтаксис

box-pack: start|end|center|justify;

Значение Описание
start Для блоков с нормальным направлением, левый край первого дочернего элемента располагается с левой стороны (все свободное пространство идет за последним дочерним элементом). Для блоков с обратным направлением, правый край последнего дочернего элемента располагается с правой стороны (все свободное пространство идет перед первым дочерним элементом)
end Для блоков с нормальным направлением, правый край последнего дочернего элемента располагается с правой стороны (все свободное пространство располагается перед первым дочерним элементом). Для блоков с обратным направлением, левый край первого дочернего элемента располагается с левой стороны (все свободное пространство идет за последним дочерним элементом)
center Свободное пространство делится пополам, первая его половина идет перед первым дочерним элементом и вторая половина располагается после последнего дочернего элемента
justify Свободное пространство делится поровну между каждым дочерним элементом (нет свободного пространства перед первым и за последним дочерними элементами)


CSS Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS