中央寄せ – marginが効かない時 | ゼロから始めるweb屋な生活

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

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で要素幅の真ん中に文字を移動	marginを消去。inline値ではmargin値にauto値を指定しても最小値に縮むため。	text-alignを追加。spanタグの親要素であるdivタグはblock値のため、span内部の文字を真ん中に移動