「display:flex」+「align-items:center;」で縦位置を中央に寄せているのに画像の上下余白が合わない時の対処方法のメモです
完全なスタイルメモですので、ケースによっては誤っているかも知れませんからあしからず。
以下のような形のHTMLで、要素を横並びにしたい場合によく使う「display:flex;」。
<div class="pwcn-parent">
<div class="child-a">
<img src=""....>
</div>
<div class="child-b">
<p>文字列</p>
</div>
</div>
縦位置を中央に揃えたい場合は、具体的にはこんな感じで書きますね。
.pwcn-parent {
/* display: flex; */
display: flex;
align-items: center;
justify-content: left;
border: 1px solid #000;
padding: 8px;
background:#000;
color:#fff;
}
そして以下が上記のHTMLとスタイルコードを追加した表示サンプルです。
あいうえおかきくけこ
...わざと背景を黒にしていますが、画像上下の黒い部分に若干の違いがあるの分かりますか?
まあこのぐらい..と言いたいところですが、どうせなら直しておきたい、そんな時、上記の構造であれば、以下のスタイルコードを追加すると解決できます。
.child-a img {
display: block;
margin: auto 0;/* こちらはいらない場合もある */
}
ちなみに以下が追加してみたものです(違いを見ていただくため、class名は変えてます)。
あいうえおかきくけこ
うーん、いい感じです。
以上、display:flex;を使った時に画像の上下の隙間が中央にならない時の対処例でした。
コメントを残す