の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【CSS】div align=”center”を使わずにmargin autoでセンタリングする方法

      2016/01/23

divの入れ子でページ内センタリングせずに、左右のmarginをautoにすることで実装することができます。

20141111_center

DIVの入れ子(NG例)

<!doctype html>
<html>
<head>
<title>DIVでセンタリング</title>
<style type="text/css">
*{
 margin: 0;
 padding: 0;
}

.contents {
 background-color: #CCC;
 width: 320px;
}

</style>
</head>
<body>
<div align="center">
 <div class="contents">
  <H1>Head Line</H1>
  <p>Sample Contents</p>
 </div>
</div>
</body>
</html>

サンプル

DIVでセンタリング

marginを使ったソース

<!doctype html>
<html>
<head>
<title>MARGINでセンタリング</title>
<style type="text/css">

*{
 margin: 0;
 padding: 0;
}

.contents {
 margin:0 auto 0 auto;
 text-align:center;
 background-color: #CCC;
 width: 320px;
}

</style>
</head>
<body>
<div class="contents">
 <H1>Head Line</H1>
 <p>Sample Contents</p>
</div>
</body>
</html>

サンプル

MARGINでセンタリング

まとめ

margingのautoを使ってページ内でセンタリングする方法をご紹介しました。

marginとpaddingについては以下の記事も参照してみてください。

【CSS】paddingとmarginの違いまとめ | まとめと比較

 - JS,PHP,CSS ,

336-280

  関連記事

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

no image
【PHP】ユーザーがフォームで入力した内容を表示するなら「htmlspecialchars」する

Webアプリケーション作成で必要なセキュリティ対策として、htmlspecial …

paiza.IO を使ってみた

IT/WEBエンジニア向けの転職サービス会社paiza(パイザ)が提供するpai …

解像度
Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法

商標登録するイメージファイルを作る必要がありjpgファイルにdpiを指定すること …