【CSS】コンテンツを左右方向の中心に置く方法

かわんです。

今回は、コンテンツを左右方向の中心に置く方法です。とても簡単ですので、最後までお読み下さいね。

まずはHTMLから・・・。

<div id="main-contents">
<p>contents</p>
</div><!-- main-contents -->

「main-contents」で全体を囲んでいます。今回は「id」にしましたが、状況によって「class」でもいいです。

また、「div」を使っていますが、こちらも状況によって「section」や「article」でもいいです。

また、「main-contents」もお好みで。分かりやすいモノにすれば良いです。

次にCSSを・・・。

#main-contents {
width: 960px;
margin:  0 auto;
}

今回、「width(幅)」は960pxにしています。これはお好みで・・・。「width(幅)」を指定しないと左右方向の中心に置くことが出来ません。

ポイントは「margin: 0 auto;」です。これで左右方向の中心にコンテンツを置くことが出来ます。

注意点

今回は僕の環境で実現出来たことです。もし上手くいかない場合はごめんなさい・・・。他サイト様の記事をご確認下さい。

また、HTMLとCSSをいじるので、予期せぬトラブルが発生することがありますので、バックアップしてからお試し下さい。

なお、サポート出来ませんので自己責任で行って下さいね。

さいごに

ということで、色々と書いてみました。

コンテンツを左右方向の中心に置きたい方はお試し下さい。

恐らく、簡単に出来るかと思います。

ポイントは「width(幅)」で幅を指定して、「margin:0 auto」にすることです。なお、「margin」の「0」は上下方向の余白を設定しているだけ。

ここはお好みで。「margin:0 auto」は上下方向の余白は0、「auto」は左右の中心という意味です。

コンテンツを画面の中心に置く機会って多いかと思うのでお試し下さいね。

おしまい。