概要

画像の上に文字を重ねたい。
楽をしたいので Bootstrap を利用する。

バージョン

Bootstrap: 5.0.2

つかうもの

Image overlays - Bootstrap

コード

ベーシック（上寄せ）

サンプルそのままです。

<div class="card bg-dark text-white" style="width: 300px; height: auto;">
  <img src="./fulldict.png" class="card-img" alt="icon image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">
      This is a wider card with supporting text below as a natural lead-in to additional content.
      This content is a little bit longer.
    </p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

上下中央寄せ

card-img-overlay がついてる div を flex にして、その内に div を新たに作り上下の margin を auto にする。

<div class="card bg-dark text-white" style="width: 300px; height: auto;">
  <img src="./fulldict.png" class="card-img" alt="icon image">
  <div class="card-img-overlay d-flex">
    <div class="my-auto">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      </p>
      <p class="card-text">Last updated 3 mins ago</p>
    </div>
  </div>
</div>

上下左右中央寄せ

上下中央寄せの my-auto を m-auto に変更

<div class="card bg-dark text-white" style="width: 300px; height: auto;">
  <img src="./fulldict.png" class="card-img" alt="icon image">
  <div class="card-img-overlay d-flex">
    <div class="m-auto">
      <h2 class="card-title">SAMPLE!!</h5>
    </div>
  </div>
</div>

右下寄せ

上下中央寄せの my-auto を mt-auto ms-auto に変更

<div class="card bg-dark text-white" style="width: 300px; height: auto;">
  <img src="./fulldict.png" class="card-img" alt="icon image">
  <div class="card-img-overlay d-flex">
    <div class="mt-auto ms-auto">
      <h2 class="card-title">SAMPLE!!</h5>
    </div>
  </div>
</div>

注意点

画像が小さくなると文字が入りきらなくなることがあります。 (結果参照)
レスポンシブで使う際は画像の大きさに合わせて文字の大きさを変える等の対応が必要です。

結果

まとめ

画像の大きさに気をつけて margin auto を駆使して画像と文字を重ねよう。