CSS3ボックス-alignプロパティ
例
ボックスアライン箱パック中心の特性の両方を使用してdiv要素の子要素:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
»をお試しください
より多くの例については、このページの下で。
ブラウザのサポート
現在では、すべての主要なブラウザは、箱alignプロパティをサポートしていません。
私有財産の-ms-flexのアラインサポートすることにより、Internet Explorer 10。
MOZ-ボックスアラインサポート - 私有財産によってFirefoxの。
私有財産の-webkit-ボックスアラインサポートによりSafariやChromeの。
注:Internet Explorer 9の以前のバージョンではIEの弾力ボックスをサポートしていません。
属性の定義と指示
ボックスボックス - align属性は、子要素が整列する方法を指定します。
デフォルト: | ストレッチ |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.boxAlign = "センター" |
文法
box-align: start|end|center|baseline|stretch;
値 | 説明 |
---|---|
スタート | 法線方向のボックスの場合、それぞれの子要素の上端は、ボックスの上部に沿って配置されています。 逆のケースの底、各サブ要素の下端に沿ってボックスで |
終了 | 法線方向のボックスの場合、それぞれの子要素の上端は、ボックスの下部に沿って配置されています。 リバースボックスは、各サブ要素の底部は、ボックスの上部に沿って配置されています |
センター | 任意の余分なスペースは、均等に、より上に子要素の半分以上分割され、他の半分のサブ要素の残りの部分 |
ベースライン | 場合ボックス配向が一軸または横に埋め込まれている、すべてのサブ要素は、それらのベースラインに整列して配置されています |
ストレッチ | 子要素を含むブロックを埋めるためにストレッチ |
オンラインの例
要素ボックスアライメントの値を変更
この例では、ボックスアラインの要素の値を変更するには、JavaScriptを使用する方法を示します。