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

目次

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

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

参考になったページ

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

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;
}

前へ

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

次へ

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき