The purpose of life is a life of purpose. postなし

HTML 不具合事象

  • HOME »
  • HTML 不具合事象

ページが真ん中にならない ページ全体を中央に表示(センタリング)
考え方】

ページ全体を中央表示した場合には、ページ全体である<body>~</body>の中に<div>~</div>を入れ、その<div>~</div>を中央に表示する事で可能になります。

下記の3段階の指定方法を同時に指定する事で実現します。
text-align:center;
margin-left:auto;margin-right:auto;
text-align:left;

ホームページ全体を中央寄せで表示する方法
●center.html

<style>
body{
text-align: center;
}
div#center {
width: 450px;
height: 800px;
text-align: left;
background: #AAAAAA;
margin: auto;
}
h1 {
text-align: center;
}
・・・省略・・・
</style>
</head>
<body>
<div id="center">
<h1>要素の中央寄せ</h1>
<p>「margin」プロパティを使ってページ全体を中央に寄せています。</p>
</div>
</body>

ページ全体(body内にあるタグ全て)を<div>タグで囲い、一番外側のdivブロックに対して中央寄せの設定をします。ブロックの中央寄せですので「margin」プロパティを使います。ページ全体に一つの設定ですのでid属性に設定するようにdiv要素のIDセレクタ(div#center)に「margin: auto;」を記述します。ページ全体の背景色(background)や幅(width)・高さ(height)をCSSで決めています。一番外側のdivタグのid属性としてIDセレクタ名("center")を指定します。IDセレクターで指定した幅を維持しながらブラウザーの幅に応じて自動的にdivタグの領域が中央寄せになります。 対して
PAGETOP
Copyright © CHALLENGE BMTS-500 All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.