CSSの最近のブログ記事

要素にはブロックレベルとインラインレベルの2つの種類に分けることができます。この2つの種類の要素をセンタリングする方法はそれぞれ異なります。ここでは、ブロックレベル要素をセンタリングする方法を示します。

CSSの仕様通りに全てのブラウザが表示してくれればいいのですが、残念ながら現実は違います。今後の改善を祈りながら、現状での最善策を示します。次のようなHTMLソースがあったとします。

<div class="outer">
    <div class="inner">
        <!-- ここに文章などが記述されている。 -->
    </div class="inner">
</div class="outer">

このような場合、class="inner" のついている要素をセンタリングするには次のようにします。

.outer {
    text-align: center;
}
.inner {
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
 

【参考文献】
[web] ブロックレベル要素をセンタリングする - Web標準普及プロジェクト