CSSでは、いくつかの特性は、水平要素を整列させるために使用することができます。
中央揃え-使用margin
ブロックレベル要素の幅を設定すると、そのコンテナの端に出てストレッチからそれを防ぐことができます。 使用margin: auto; 、水平にそのコンテナ内の要素をセンタリングします。
要素は、指定された幅を取るだろう、と残りのスペースは2のマージンの間で均等に分割されます：
ヒント：場合はセンターの整列は効果がありませんwidthプロパティを設定（または100％に設定）されていません。
ヒント：テキストを揃えるについては、 CSSテキストの章を。
左と右揃え-使用してposition
要素を整列させるための一つの方法は、使用することであるposition: absolute; ：
例
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} »それを自分で試してみてください 注：絶対配置要素が正常流から除去され、及び要素を重複することができます。
ヒント：に要素を整列するときposition 、必ず定義marginとpaddingのため<body>要素を。 これは、異なるブラウザで視覚的な違いを避けるためです。
使用している場合、以前のIE8の問題点とは、もありますposition 。 （私たちの場合はコンテナ要素場合<div class="container">指定された幅を有し、 !DOCTYPE宣言が欠落している、IE8およびそれ以前のバージョンが追加されます17px margin右側に。 これは、スクロールバーのために予約された空間であると思われます。 だから、常にセット!DOCTYPE使用するとき宣言をposition ：
例
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} »それを自分で試してみてください 左と右揃え-使用してfloat
要素を整列させるための別の方法は、使用するfloatプロパティ。
ヒント：に要素を整列するとfloat 、常に定義marginとpaddingのため<body>要素を。 これは、異なるブラウザで視覚的な違いを避けるためです。
使用している場合、以前のIE8の問題点とは、もありますfloat 。 場合!DOCTYPE宣言が欠落している、IE8およびそれ以前のバージョンが追加されます17px margin右側に。 これは、スクロールバーのために予約された空間であると思われます。 だから、常にセット!DOCTYPE使用するとき宣言をfloat ：
例
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} »それを自分で試してみてください