bootstrapで画像と文字を横並びにしたいです

Question

bootstrapのグリッドレイアウトで画像を横並びには出来たのですが
画像とテキストを横並びにしたいです。

横並びにはなってくれるのですが
画像の中央あたりにテキストを水平にスタイリングしたいのですが
文字だけが上に上がってしまいます。

グリッドレイアウトで横並びにすることが間違っているのでしょうか？
フレックスボックスの方が良いのでしょうか？

どのようにすれば文字が画像に対して横並びで中央にくるようになるのか教えてください。

  <div class="container">
    <div class="row">
      <div class="col">
        <img class="my-5 w-100" src="img/">
        </div>
      <div class="col">
        <div> 
        <p>画像の中央あたりに横に並べたいです</p>
　　　　　</div>       
    　 </div>
  　 </div>
  </div>

Answer 1

下記でどうでしょう。

  <div class="container">
    <div class="row">
      <div class="col">
        <img class="my-5 w-100" src="img/">
        </div>
      <div class="col d-flex align-items-center">
        <p class="mb-0">画像の中央あたりに横に並べたいです</p>
    　 </div>
  　 </div>
  </div>

Flexユーティリティ～Bootstrap4移行ガイド : 交差軸方向のアイテムの整列（Align items）

Comments

[chocon]

有り難う御座います。
無事に悩みが解決しました！

Answer 2

下記のコードでどうでしょうか？

      <div class="container">
        <div class="row">
          <div class="col">
            <img class="my-5 w-100" src="jpg/">
            </div>
          <div class="col d-flex align-items-center">
            <div> 
            <p>画像の中央あたりに横に並べたいです</p>
    　　　　　</div>       
        　 </div>
      　 </div>
      </div>

Comments

[chocon]

有り難う御座いました！
とても参考になりました！！