【html/CSS】横並べした画像を上寄せ・下寄せにする方法

画像を横並べしたとき、画像の高さが異なると当然上寄せ、中央寄せ、下寄せのいずれかになります。

その位置を任意で指定するために、横並べした画像を上寄せ・下寄せにする方法を紹介します。

画像を横並べする方法はこちら↓

通常画像は下寄せ

画像を普通に並べ、それらの高さが違う場合下揃えになります。

<img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt="">
<img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt="">

【ただ並べている場合】imgにvertical-align: top

img画像を兄弟要素として並べている場合、img自体にvertical-align: topを指定すると上寄せになります。

<style>
img{
    vertical-align: top;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt="">
<img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt="">

vertical-align: bottomを指定するかvertical-align未指定だと下揃えになります。

【tableで並べている場合】tdにvertical-align: top

tableのtdで並んでいる場合はimg自体ではなく、tdにvertical-align: topを指定します。

<style>
.example2 td{
    vertical-align: top;
}
</style>
<table class="example2">
    <tr>
        <td><img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt=""></td>
        <td><img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt=""></td>
    </tr>
</table>

vertical-align: bottomを指定すると下揃えになります。

【display: flexで並べている場合】親要素にalign-items: flex-start

display:flexで画像を並べている場合、display:flexを指定している要素にalign-items: flex-startを指定します。

<style>
.example3{
    display: flex;
    align-items: flex-start;
}
</style>
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt="">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt="">
</div>

align-items: flex-endを指定すると下揃えになります。

【まとめ】横並べした画像を上寄せ・下寄せにする方法

ただ並べている場合

• 【上寄せ】imgにvertical-align: top
• 【下寄せ】imgにvertical-align: bottomかvertical-align未指定

tableで並べている場合

• 【上寄せ】tdにvertical-align: top
• 【下寄せ】tdにvertical-align: bottom

display:flexで並べている場合

• 【上寄せ】display:flexを指定している要素ににalign-items: flex-start
• 【下寄せ】display:flexを指定している要素ににalign-items: flex-end

以上、横並べした画像を上寄せ・下寄せにする方法でした。