よく使う中央寄せ。適用方法も様々で、迷ってしまいがちです。
基本的な使い方をメモしておきます。
まずは基本のtext-align
まずは、よく使う文章の中央寄せ。
画面の左右中央に文字を配置したい場合は、text-alignプロパティをcenterと指定します。
<html>
<head>
<style>
p {
border: solid 2px #ccc;
text-align: center;
}
</style>
</head>
<body>
<p>センタリング（中央配置）しています。</p>
<p><img src="img.png"></p>
</body>
</html>
pタグ領域の中で、左右中央に配置されていることがわかります。
pタグの中にあるimg（画像）も同様に中央寄せされます。
p要素は、ブロックレベル要素なので横いっぱいに広がる領域を確保するのですが、ここではtext-alignを使って、pタグの中にある要素をその領域内でどこに配置するかということを指定します。
インライン要素とブロック要素の中間であるインラインブロック要素も、このtext-alignの方法が使えます。
ブロック要素を中央寄せ
ブロック要素（display: blockの要素）を中央配置する場合には、text-alignは使えません。
要素にwidth（幅）やheight（高さ）を指定するのがポイントです。
ブロック要素を左右中央に
ブロック要素を中央寄せするには、要素にwidthを指定して、marginプロパティを使います。
<head>
<style>
div {
width: 300px;
height: 250px;
background-color: coral;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
ブロック要素を中央寄せにするには、マージンを指定します。
</div>
</body>
マージン（要素の外側の領域）の左右をautoとすることで、左右の余白を自動で指定して中央に配置してくれます。
ブロック要素を上下中央に
ブロック要素を親要素の上下中央に配置する方法。
親要素に、display: table-cell、vertical-align:centerとします。
display: table-cell とすると、要素をテーブルのセルとして扱い、vertivcal-align（要素の縦位置）の指定ができたり、要素を均等幅で配置できるようになります。
ポイントは、親要素に高さを指定しておくことです。
親要素の領域の中で上下中央に配置されます。
<head>
<style>
.item_box {
width: 300px;
height: 250px;
border: solid 1px black;
display: table-cell;
vertical-align: middle;
}
.item {
background-color: coral;
margin: 10px;
}
</style>
</head>
<body>
<div class="item_box">
<div class="item">中央寄せしたいアイテム</div>
</div>
</body>
ブロック要素をど真ん中に
ブロック要素を親要素の上下左右中央に配置する方法。
上記の上下中央配置に少し手を加えます。
まずは、中央に配置したい要素に、width（幅）とheight（高さ）を指定。
そして、今度は親要素ではなく、中央に配置する要素にmargin: autoとして、マージンを上下左右自動と指定します。
<head>
<style>
.item_box {
width: 300px;
height: 250px;
border: solid 1px black;
display: table-cell;
vertical-align: middle;
}
.item {
width: 100px;
height: 50px;
background-color: coral;
margin: auto;
}
</style>
</head>
<body>
<div class="item_box">
<div class="item">ど真ん中への配置</div>
</div>
</body>
画面のど真ん中に配置
上の例では、親要素の中央に配置されていますが、親要素は画面の左に寄っているので、画面全体の中央に配置とはなっていません。
画面全体の中央に配置する方法はいくつかあるのですが、ここでは座標軸を指定する方法を使います。
座標指定には、positionプロパティを使います。
まず座標を絶対値指定とするために、position: absolute、次に top, right, bottom, left にそれぞれ 0。さらに、 margin: auto と指定します。
<head>
<style>
.item {
width: 100px;
height: 50px;
background-color: coral;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
</style>
</head>
<body>
<div class="item">ど真ん中への配置</div>
</body>
画面の上下左右中央のど真ん中に配置されました。
親要素を基準として中央に配置する場合には、親要素にposition:relative、中央配置したいその子要素にposition:absoluteとすれば、親要素の中での中央配置となります。
<head>
<style>
.item_box {
border: solid 1px black;
width:300px;
height:300px;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
</style>
</head>
<body>
<div class="item_box">
<div class="item"></div>
</div>
</body>
コメント