【CSS】vertical-align:center;が効かないときにやったこと

Thu, 17 Feb 2022 08:58:23 +0900

縦中央に配置したいけどできない

の中のに入れたとか``を上下左右中央に配置したくて、横中央の配置はtext-align:center;やmargin-left:auto;＆margin-right:auto;でできたのですが、縦中央の配置がvertical-align:center;でできませんでした。そこで解決方法が見つかったのメモ。

参考になったページ

以下のサイトを参考に解決できました。

https://haniwaman.com/vertical-align/ https://haniwaman.com/vertical-align/

display:flex;で解決

結局、vertical-align:center;は使わず、上記の参考ページもあったdisplay:flex;で解決できました。

参考ソース

display:flex;とalign-items: center;とjustify-content: center;をセットで使います。これを上下左右中央に配置したい物を囲っているタグに割り当てればOKでした。

.box  {
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

Display:flex;上下中央配置 on qwerty.work

【CSS】vertical-align:center;が効かないときにやったこと

縦中央に配置したいけどできない

参考になったページ

display:flex;で解決

参考ソース