Flexboxでテキストと画像を横並びにした場合に下端のみ揃わない原因について

Question

初心者です。
ホームページを作成していて、Flexboxでテキストと画像を横並びにしたいのですが、どうしても下端が揃わず画像の方が少しだけ小さくなってしまいます。

コードは以下の通りです。

HTML

<div class="content-try"> <div class="text-try"> <p>タイトル</p> <p>テキストテキストテキストテキスト</p> </div> <div class="img-try"> <img src="images/ehon.jpg" alt="画像"> </div> </div>

CSS
.content-try{
display:flex;
justify-content: center;
}
.text-try {
color: white;
background-color: red;
}

色々調べてこちらの方法なども試してみましたが、ダメでした。
リンク内容

どのようなサイズの画像を使っても、同じ現象が起こります。
ご教示のほどよろしくお願いいたします。

Answer 1

img {
display:block;
}

または

img {
vertical-align: bottom;
}

どちらでもそろえることができます。

Comments

[hatena19]

なるほど、imgはインライン要素だから、余白ができるのですね。

Answer 2

理由は私にも分かりませんが、画像のラッパーにもflexを設定したら揃うようです。

.img-try {
 display:flex;
}

あるいは、ラッパー自体をなくしても揃います。

<div class="content-try">
  <div class="text-try">
    <p>タイトル</p>
    <p>テキストテキストテキストテキスト</p>
  </div>
  <img src="https://placehold.jp/400x400.png" alt="画像">
</div>

Comments

[退会済みユーザー]

揃いました！
ありがとうございました！！