メモ：display: inline-block;でのセンター寄せ

インラインとブロックの中間の要素として扱える

ブロック要素に指定してみる

test1.html

①block要素の width の初期値は親要素の幅に依存しているが、
 inline-block要素は inline要素のように内容によって横幅が決まっている
②横幅が内容と同じなので、変化がないように見えているが中央に寄っているのだろうか
③④inline-blockの pタグは、inline要素のように text-alignが効いている
⑤inline要素ではできないサイズの指定も出来ている
⑥サイズを指定しても、text-alignが効いている

インライン要素に指定してみる

test2.html

①②③④ inline要素と同じ挙動だと確認
⑤ spanタグだがサイズ指定ができるようになっている
⑥ text-alignも適用される

inline-blockの使い道

test3.html

① block要素だと、要素の最後に改行が入るのでそのままでは横には並ばない
② inlineだと、横には並ぶがサイズの指定はできない
③ inline-blockならば、サイズ指定も可能で横並びにできる
bottonタグなどを横並びにしたい時などに使えるようだ


参考になったサイト

CSS: カスケーディングスタイルシート inline-block
【display】インラインブロック要素の性質と使い方
【CSS】displayの使い方を総まとめ！inlineやblockの違いは