【CSS】IMGタグで画像の下に余白ができたときに消す方法

Thu, 22 Sep 2022 08:59:45 +0900

vertical-align: bottom;で消す

画像の下にマージンができてしまうことがあります。img要素に対して、vertical-alignの値をbottomにすると、下の余白がなくなります。vertical-alignは要素の縦方向の配置位置に関するプロパティで、値にbottom（下部）を寄せることで下の余白をなくしています。

img {
    vertical-align: bottom;
}

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