CSS3 Свойство box-align
Полный 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;
} |
Попробуйте сами » Еще примеры внизу этой страницы.
|
Поддержка Браузерами
Свойство box-align не поддерживается ни одним из основных браузеров.
Firefox поддерживает альтернативное свойство -moz-box-align.
Safari и Chrome поддерживают альтернативное свойство -webkit-box-align.
Определение и ИспользованиеСвойство box-align указывает, как выравнивать дочерние элементы блока.
Значение по умолчанию: |
stretch |
Наследуется: |
нет |
Версия: |
CSS3 |
JavaScript синтаксис: |
объект.style.boxAlign="center" |
Синтаксис
box-align: start|end|center|baseline|stretch; |
Значение |
Описание |
start |
Для блоков с нормальным направлением, верхний край каждого дочернего элемента располагается
вдоль верха блока. Для блоков с обратным направлением, нижний край каждого дочернего элемента
располагается вдоль низа блока |
end |
Для блоков с нормальным направлением, нижний край каждого дочернего элемента располагается
вдоль низа блока. Для блоков с обратным направлением, верхний край
каждого дочернего элемента располагается вдоль верха блока |
center |
Свободное пространство делится поровну, с половиной, размещенной над дочерним элементом, и
другой половиной - под дочерним элементом |
baseline |
Если box-orient равно inline-axis или horizontal, все дочерние элементы располагаются
в соответствии с их выровненными базовыми линиями |
stretch |
Дочерние элементы растягиваются, чтобы заполнить содержащий их блок |
|
Попробуйте сами - Примеры |
Изменить значение box-align для элемента
Этот пример демонстрирует, как использовать JavaScript, чтобы изменить значения box-align
для элемента.
Полный CSS Справочник
|