[HTML/CSS]横中央寄せ（margin:0 auto;）の動作条件

条件1. 対象がブロック要素である
条件2. 対象にwidthが規定されている
条件3. 親要素にwidthが規定されている
※htmlデフォルトでbodyにwidthが規定されており（子要素に継承されているとのこと）

.sample {
	width:300px;
	display:block;
	margin:0 auto;
	background:yellow;
	border:solid 1px;
}

.sample {

width:300px;

display:block;

margin:0 auto;

background:yellow;

border:solid 1px;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
.sample {
	width:300px;
	display:block;
	margin:0 auto;
	background:yellow;
	border:solid 1px;
}
.sample--block {
	display:block;
}
.sample--inline-block {
	display:inline-block;
}
.sample--inline {
	display:inline;
}
.sample--table {
	display:table;
}
</style>
</head>
<body>
<div>
  <span class="sample  sample--block">display:block;</span>
</div>
<div>
  <span class="sample  sample--inline-block">display:inline-block;</span>
</div>
<div>
  <span class="sample  sample--inline">display:inline;</span>
</div>
<div>
  <span class="sample  sample--table">display:table;</span>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

<style>

.sample {

width:300px;

display:block;

margin:0 auto;

background:yellow;

border:solid 1px;

}

.sample--block {

display:block;

}

.sample--inline-block {

display:inline-block;

}

.sample--inline {

display:inline;

}

.sample--table {

display:table;

}

</style>

</head>

<body>

<div>

<span class="sample sample--block">display:block;</span>

</div>

<div>

<span class="sample sample--inline-block">display:inline-block;</span>

</div>

<div>

<span class="sample sample--inline">display:inline;</span>

</div>

<div>

<span class="sample sample--table">display:table;</span>

</div>

</body>

</html>

この記事を書いた人

yellow

パズルファクトリー制作ノート

この記事を書いた人

新着記事

Practice is better than precept.