cssの中央寄せは、display:blockとその他でやり方が違う

こんにちは、tanaka です。

cssの中央寄せは、
これで合っているのかな?
と、感じたことはありませんか

今回は、
そんな
なんだか難しい
cssの中央寄せのやり方を説明します。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

二種類のcss中央寄せ

今回は、
中央寄せでも
左右の中央寄せの話
限定します。

中央寄せには二種類あります。

  1. 一つの要素内での中央
  2. 親要素から見た中央

文章だけでは、
よくわからないと思われますので、
下の画像を見てください

1:一つの要素内での中央

中央寄せの画像16

2:親要素から見た中央

中央寄せの画像1

この二種類の中央があります。

そして、
これらのやり方ですが
結論からいいますと、

中央寄せの画像16

1:一つの要素内での中央寄せのやり方

display幅の指定やり方
inline××
inline-block直接
text-align: center;
block直接
text-align: center;
中央寄せの画像1

2:親要素から見た中央寄せのやり方

displaymargin
0 auto
やり方
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

このようになります。

これではよく分からないと思われるので、
一つずつ解説していきます。

一つの要素内での中央

1:一つの要素内での中央
から説明します。

中央寄せの画像16

displayを基準にして話を進める

display: inline;
display: inline-block;
display: block;

によって対処が違うので、
displayを基準にして話を進めていきます。

一つの要素内での中央は、
一つの要素で完結しています
(親要素とか子要素とかの話は出てこない)

html = css の 1対1 の話です。

displayやり方
inline幅の指定が出来ないため
不可能
inline-block
block
直接
text-align: center;

これでは、よく分からないと思われるので、
具体例を挙げて、
inline
inline-block
block
の順番に説明していきます。

display: inline; 幅の指定が出来ない

まずは、
display: inline;
の説明です。

結果から言うと、
中央にはできません

中央寄せの画像15

上の画像の通り、
幅の指定が出来ないためです。

display: inline-block; は text-align: center;

次に、
display: inline-block;
の説明をします。

displayやり方
inline幅の指定が出来ないため
不可能
inline-block
block
直接
text-align: center;

これは簡単で
text-align: center;
を入れるだけです。

実際に、
html css 完成画像
を見てみましょう。

下の画像はhtmlです

中央寄せの画像12

これを使って中央寄せを作っていきます

中央寄せの画像10

text-align: center;
幅(width)
を入れるだけです。

中央寄せの画像11

出来ました。

display: block; も display: inline-block;

次、
display: block;
の説明をします。

displayやり方
inline幅の指定が出来ないため
不可能
inline-block
block
直接
text-align: center;

これも、
display: inline-block;
と同様です。

中央寄せの画像13

text-align: center;
幅(width)
を入れるだけです。

中央寄せの画像11

出来ました。
これは難しくなさそうですね。

text-align: start center end

中央寄せに使った
text-align:
は、
中央寄せだけでなく
前づめ、中央、後ろづめ
があります。

前づめ中央後ろづめ
text-alignstartcenterend

text-align:justify; は、使いづらい

あと、
justify (均等割)もあります。

それは、
最後の行以外
均等割になります。

しかし、
1行しかない場合
その行が最後の行とみなされるので
均等割してくれません。

むしろ、
ややこしいので使わない方が無難でしょう。

文字の間を開けたい場合は、
文字のスペースを指定する
letter-spacing: 10px;
を使う方が良いでしょう。

親要素から見た中央

次は、親要素から見た中央です。

中央寄せの画像1

こちらも、displayを基準にして話をします

こちらも、
displayを基準にして話を進めていきます。

まずは、

display: inline;
display: inline-block;
display: block;

に対するやり方をみてください。

displaymargin
0 auto
やり方
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

注意)text-align: center;は、子孫要素へ継承されます

inline
inline-block

block

で、
中央寄せのやり方が違います。

それでは一つずつ説明していきます。

display: inline; は、親要素へ text-align: center;

まず、
display: inline;
の説明をします。

見本のhtml css を用意しました。

中央寄せの画像3

<親要素 center01>
 <子要素 center02>

<子要素 center02>の「あああ」の文字を中央へ寄せます。

displaymargin
0 auto
やり方
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

.center01(親要素)へ
text-align: center;
を入れます。

.center02(子要素)
display: inline;
が、中央へ寄せられます。

下の画像はcssです。

中央寄せの画像4
中央寄せの画像5

中央寄せができました。

display: inline-block; も、親要素へ text-align: center;

次に
display: inline-block;

下の画像はhtmlです

中央寄せの画像3

<親要素 center01>
 <子要素 center02>

<子要素 center02>の「あああ」の文字を中央へ寄せます。

displaymargin
0 auto
やり方
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

.center01(親要素)へ
text-align: center;
を入れます。

.center02(子要素)
display: inline-block;
が、中央へ寄せられます。

下の画像はcssです。

中央寄せの画像6
中央寄せの画像7

中央寄せができました。

display: block; は、margin: 0 auto; が使える

三つ目、
display: block;

下の画像はhtmlです

中央寄せの画像3

<親要素 center01>
 <子要素 center02>

<子要素 center02>の「あああ」の文字を中央へ寄せます。

displaymargin
0 auto
やり方
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

今回は、
親要素ではなく
子要素へ直接入れます。

.center02(子要素)へ直接
 ・width: 35%;
 ・margin: 0 auto;
を入れます。

.center02(子要素)
display: block;
が、中央へ寄せられます。

下の画像はcssです。

中央寄せの画像8
中央寄せの画像23

中央寄せができました。

ですが、
文字が中央へ来ていません。

これは、
text-align: center;
が、
入っていないため
文字が中央へこなくなりました。

今まで、
文字が中央へ来ていたのは、
親要素に、
text-align: center;
が、入っており
それが継承されていたためです。

文字を中央は、text-align: center;

そして、この場合に
文字を中央へ持ってくる方法は簡単で
直接
text-align: center;
を、入れると文字は中央へ来ます。

まとめ

一つの要素内での中央

中央寄せの画像16
display幅の指定
inline××
inline-blocktext-align: center;
blocktext-align: center;

親要素から見た中央は

中央寄せの画像1
displaymargin
0 auto
inline使用不可親要素へ
text-align: center;
inline-block使用不可親要素へ
text-align: center;
block直接
width: 35%;
margin: 0 auto;

text-align から見て inline、inline-block も文字扱い?

ここからは余談なので、
興味がわいた人だけ見てください。

中央寄せってなんだか難しいなと
感じた方は結構いると思います。

それを今から
私なりに分析していきます。

text-align: center;
は、
textと、名前がついています。

これは、
文字や画像に働きかけるためだと思います。

しかし、
直接使用だけでなく、
なぜか
親要素へ入れても使える。

それは、おそらく
text-align: center;

display: inline;
display: inline-block;

文字や画像として見ているため
だと考えられます。

本来、
文字や画像へ働きかけるだけなのに
なぜか、
機能が拡張されて

display: inline;
display: inline-block;

まで使える。

これが、
中央寄せを
難しくしている原因
かと思われます。

しかも、
text-align: center;
は、継承までします。

うん
ややこしい

ちなみに、
この最後の
text-align: center;
の話は、
私の予測です。

事実かどうかは、
html,cssを作った人に聞く必要があります。

が、
どなたが作ったのか存じ上げないので
無理かもしれません。

それでは、
今回の話は、ここまでです。

以上、
cssの中央寄せのやり方を説明(初心者向け)
の話しでした。

ありがとうございました。

タイトルとURLをコピーしました