--- title: box-align slug: Web/CSS/box-align tags: - CSS - CSS プロパティ - Non-standard - Reference translation_of: Web/CSS/box-align ---
{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}

box-align は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

/* キーワード値 */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* グローバル値 */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

配置する方向は、その要素の向き (水平か垂直か) に依存します。

{{cssinfo}}

構文

box-align プロパティは、 以下に記載する値で定義されます。

値

start
ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。
center
ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。
end
ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。
baseline
ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。
stretch
ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。

形式文法

{{csssyntax}}

例

<!DOCTYPE html>
<html>
<head>
<title>CSS box-align example</title>
<style>
div.example {
  display: box;                   /* 仕様書通り */
  display: -moz-box;              /* Mozilla */
  display: -webkit-box;           /* WebKit */

  /* ボックスの高さを子要素より高くし、
     box-pack のためのスペースを確保する */
  height: 400px;

  /* ボックスの幅を子要素より広くし、
     box-align のためのスペースを確保する */
  width: 300px;

  /* 子要素の向きは垂直方向にする */
  box-orient: vertical;           /* 仕様書通り */
  -moz-box-orient: vertical;      /* Mozilla */
  -webkit-box-orient: vertical;   /* WebKit */

  /* 子要素をボックス内の水平方向に対して中央に整列させる */
  box-align: center;              /* 仕様書通り */
  -moz-box-align: center;         /* Mozilla */
  -webkit-box-align: center;      /* WebKit */

  /* 子要素をボックス内の終端に寄せる */
  box-pack: end;                  /* 仕様書通り */
  -moz-box-pack: end;             /* Mozilla */
  -webkit-box-pack: end;          /* WebKit */
}

div.example > p {
  /* 子要素を親要素の幅より狭くし、
  box-align のためのスペースを確保する */
  width: 200px;
}
</style>
</head>
<body>
  <div class="example">
    <p>I will be second from the bottom of div.example, centered horizontally.</p>
    <p>I will be on the bottom of div.example, centered horizontally.</p>
  </div>
</body>
</html>

メモ

配置の用途で start と定義されるボックスの辺は、ボックスの向きに依存します。

Horizontal top
Vertical left

start と反対方向の辺が end と定義されます。

その要素の align 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。

仕様書

ブラウザーの対応

{{Compat("css.properties.box-align")}}

関連情報