CSS入門 | CSS位置プロパティ | Align

blockタイプの要素を整列するには、次の方法を使用できる。

marginプロパティを使った中央揃え

marginプロパティ値をautoに設定すると、該当要素を囲むcontainer要素を基準に、水平方向の中央揃えになる。

このとき、該当要素は特定の幅を持つ必要があり、幅を除いた残りの空間は左右に均等に分けられて余白になる。したがって、この方法を使うには、必ず該当要素のwidthプロパティ値を先に設定する必要がある。

<style>
    div { width: 300px; margin: auto; }
</style>

Internet Explorer 8以前では、HTML文書に<!DOCTYPE html>タグが挿入されている必要があり、そうするとmarginプロパティが正しく表示される。

absolute position方式で配置された要素は通常のレイアウトから外れ、ほかの要素と重なることができる。そのため、この特性を使うとHTML要素を水平方向に左右揃えできる。

positionプロパティを使って整列する場合は、<body>要素にmarginとpaddingプロパティ値を設定するのがよい。こうすることで、Webブラウザーごとにレイアウトが異なって見えることを事前に防げる。

<style>
    div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }
</style>

Internet Explorer 8以前では、HTML文書に<!DOCTYPE html>タグが挿入されている必要があり、そうするとpositionプロパティが正しく表示される。

floatプロパティを使うと、水平方向に左右揃えできる。

floatプロパティを使って整列する場合は、<body>要素にmarginとpaddingプロパティ値を設定するのがよい。こうすることで、Webブラウザーごとにレイアウトが異なって見えることを事前に防げる。

<style>
    div { width: 350px; padding: 10px; margin: 0; }
    div.left { float: left }
    div.right { float: right }
</style>

Internet Explorer 8以前では、HTML文書に<!DOCTYPE html>タグが挿入されている必要があり、そうするとfloatプロパティが正しく表示される。