中央寄せ – marginが効かない時

Pocket

要素を中央寄せにするときに、

margin: 0 auto;

を指定しているのに、marginが効いてくれない!

コーティングを始めたばかりの時のよくある話。 この原因と解決方法をご紹介します。


使用するhtmlはこちら

<!doctype html>	
<html lang="ja">	
	<head>								
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">			
		<title>Webのタブの名前だよ!</title>
	</head>								
	<body>
		<div class="oya">								
			<div class="oya_block">
				<p class="block">block</p>
			</div>
			</br>
			<div class="oya_inline">
				<span class="inline">inline</span>
			</div>
		</div>
	</body>								
</html>

ポイント

・pタグにblockという名前をつける
・spanタグにinlineという名前をつける

CSSはこちら

.oya {
  background-color: #dadada;
  padding: 10px;
}

.block {
    margin: 0 auto;
}

.inline {
  margin: 0 auto;
}

ポイント

・blockという名前がつけた要素にmarginを適用
・inlineという名前をつけた要素にmarginを適用

ブラウザでhtmlをひらくと

やはり、marginは効いていません。

視覚的に状況を把握するために、各要素の背景に色をつけてみます。先ほどのcssを編集します。

.oya {
  background-color: #dadada;
  padding: 10px;
}

.oya_block {
  background-color: white;
}

.block {
    margin: 0 auto;
    background-color: #0596d8;
    color: white;
}

.oya_inline {
  background-color: white;
}

.inline {
  margin: 0 auto;
  background-color: #f72c2c;
  color: white;
}

サイドブラウザを開いてみると

色のついている箇所が違います。これは各要素の”display”の初期値により、”background-color”の適用範囲が異なるために引き起こされます。
・<p></p>タグの”display”初期値はblock
・<span></span>タグの”display”初期値はinline
※blockは画面幅いっぱいに広がろうとする。inlineはできるだけ幅を縮めようとする。
(※display値とか要素の適用範囲に関して別に記事を書きます。⇒paddingとかborderとかmarginの話)そしてdispalay値は、margin値の使い方にも影響するため、marginが効かない事例を発生させています。

原因が判明したところで、display値がblock、inlineのときにテキストを中央寄せする方法を具体的に書いてみます。

.oya {
  background-color: #dadada;
  padding: 10px;
}

.oya_block {
  background-color: white;
}

.block {
    margin: 0 auto;
  width:100px;
  text-align: center;
    background-color: #0596d8;
    color: white;
}

.oya_inline {
  background-color: white;
  text-align: center;
}

.inline {
  background-color: #f72c2c;
  color: white;
}

やったこと

.block .inline .oya_inline
widthで要素幅を指定

marginを消去。inline値ではmargin値にauto値を指定しても最小値に縮むため。

text-alignを追加。spanタグの親要素であるdivタグはblock値のため、span内部の文字を真ん中に移動
text-alignで要素幅の真ん中に文字を移動

ブラウザで開いてみると

見事二つの要素が中央寄せになりました~めでたしめでたし。

ps

今回は、ある程度コーティングを知っている人向けに記事を書いたので、雑なところがあるけど許してください((苦笑