box

英[bɒks] 美[bɑ:ks]

n.ボックス; 箱のような物体; ボックス; 哨兵室

vt. Put... into a box [box, box]

vt.& vi.Boxing

三人称単数: ボックス 複数形: ボックス 現在分詞: ボクシング 過去形: ボックス過去分詞: boxed

align

UK[əˈlaɪn] US[əˈlaɪn]

vt. 列を作る、同盟を結ぶ、順番に並ぶ

vi. 配置; 列を形成

三人称単数: 整列現在分詞: 整列過去形: 整列過去分詞: 整列

CSSのbox-alignプロパティ 構文

関数: ボックスの子要素を配置する方法を指定します。

構文: box-align: start|end|center|baseline|stretch;

説明: start 法線方向 A の場合各子要素の上端がボックスの上端に沿って配置されたボックス。逆向きのボックスの場合、各子要素の下端はボックスの下端に沿って配置されます。通常の向きのボックスの場合、各子要素の下端はボックスの下端に沿って配置されます。逆向きのボックスの場合、各子要素の上端はボックスの上端に沿って配置されます。 center は余分なスペースを均等に分割し、半分は子要素の上に、半分はその下に配置します。ベースライン box-orient が inline-axis または horizo​​ntal の場合、すべての子要素はベースラインに揃えられます。ストレッチ 子要素を引き伸ばして、それを含むブロックを満たすようにします

注: 現在、box-align 属性をサポートしているブラウザはありません。

CSSのbox-alignプロパティ 例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:100px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
</style>
</head>
<body>

<div>
<p>我是居中对齐的。</p>
</div>

<p><b>注释:</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します