ホームページ制作MATSUTE BLOG

この記事は「2021年01月20日」に書かれた記事です

まずは、左右中央配置から見てきたいと思います。

1．左右中央に配置する：テキスト編

text-align: center;

テキストを中央配置にする最もシンプルな方法は、text-align: center;　です。

この文章を中央に配置する

HTML

<p class="text-center">この文章を中央に配置する</p>

CSS

p.text-center {
text-align: center;
}

aタグなどのインライン要素の場合

親要素をtext-align: center にする

インライン要素の中央配置

HTML

<p class="text-center"><a href="#">インライン要素の中央配置</a></p>

CSS

p.text-center { 
text-align: center;
}

インライン要素をdisplay:block を設定する

例：aタグ

インライン要素の中央配置

HTML

<a href="#">インライン要素の中央配置</a>

CSS

a {
display: block;
width:240px;
margin:0 auto;
}

aタグの幅を決め、display:blockを設定します。
あとはmargin:0 autoを設定すれば中央配置になります。

div などのブロック要素の場合

幅を設定できる場合

divの領域がわかりやすいよう背景色に白色を設定しています。

HTML

<div>この領域を左右中央に配置</div>

CSS

div  {
width: 240px;
margin: 0 auto;
}

幅を決めると領域が文字スペースよりも大きいことがほとんどかと思います。その場合、上記のようにずれてみえてしまうため、text-align:centerを設定して文字を中央に配置しておくとよいでしょう。

幅を設定できない場合

divの領域がわかりやすいよう背景色に白色を設定しています。

HTML

<div class="text-center">
<div class="box">この領域を左右中央に配置</div>
</div>

CSS

.text-center {
text-align:center;
}

.box {
display: inline-block;
margin: 0 auto;
background-color: #FFF;
}

display: flex；を使って左右中央にすることもできます。

HTML

<div class="box1">
<div class="box2">ここを左右中央に</div>
</div>

CSS

.box1 {
display: flex;
}

.box2 {
margin: 0 auto;
}

※positonを使った左右中央配置は、「4-19 要素を上下左右　中央にするためのCSSってどれを使えばいいの？！（近日公開予定）」をご覧ください。

2．上下中央に配置する

table-cell を使う

HTML

<div class="box1">
<div class="box2"><strong>この文章を上下中央（縦中央）に。</strong></div>
</div>

CSS

.box1 {
display:table;
width: 100%;
height: 100px;
}

.box2 {
display:table-cell;
vertical-align:middle;
background-color: #FFF;
}

テーブルのセルでは縦幅可変しても上下中央ができるように、display:table　と　display:table-cell　を設定し仮想tableを実現することで、高さに依存することなく上下中央配置できます。

※samp-center-tableの高さは表示確認のために入れています。

inline-block を使う

HTML

<div class="box1">
<div class="box2"><strong>この文章を縦中央に。</strong></div>
</div>

CSS

.box1 {
height:100px;
background-color: #FFF;
}

.box2 {
content: "";
display:inline-block;
height: 100%;
vertical-align:middle;
}

.samp-center-block-txt {
display:inline-block;
vertical-align:middle;
}

※inline-block　要素が横並びになると予期せぬ隙間ができてしまいます。上記の設定では回避していませんが、回避する方法は「cssの設定でできる隙間のあれこれ（近日公開予定）で掲載予定です。

※positonを使った上下中央（縦中央）配置は、「4-19 要素を上下左右　中央にするためのCSSってどれを使えばいいの？！（近日公開予定）」をご覧ください。