display:flexで画像の縦位置を中央にする方法(メモ)

公開日:2024(令和6)年4月26日/最終更新日:

WordPressのトラブル対処方法の画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



「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;を使った時に画像の上下の隙間が中央にならない時の対処例でした。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法