bootstrap card-body内での垂直中央の方法がわかりません。

Question

初学者です。
bootstrap についての質問です。
bootstrapでcardを作成しました。
bootstrapのcardについて -> https://getbootstrap.jp/docs/5.0/components/card/

card-body内でh3タグの下にaタグがくるようにしたいのですがやり方がわかりません。
現状、h3の横にaタグがきてしまいます。
d-flex align-items-centerなど試してみましたが、できませんでした。
cssでの実現でも大丈夫です。
初歩的な質問ですが、どなたか教えていただきたいです。

満たしたい条件
・card-bodyに対して、h3タグ,aタグが垂直中央揃え
・h3タグの下にaタグがくる

よろしくお願い致します。

<div class="card-body py-2 px-4 mx-auto  d-flex align-items-center">
            <div class="align-items-center">
                <h3 class="mx-auto text-center">h3タグです</h3>
            </div>
            <div class="align-items-center">
                <a href="#" class="btn btn-outline-primary btn-lg">
                   aタグのボタンです。
                </a>
            </div>
        </div>

Answer 1

flex-wrapの初期値はnowrapなので、何も指定しないと折り返さないです。
また、フレックスアイテムがwidth: auto（初期値）の場合、コンテンツに合わせた横幅になります。

    <div class="card-body py-2 px-4 mx-auto  d-flex align-items-center flex-wrap">
      <div class="align-items-center col-12">

なお、垂直中央については、ご提示のコードではcard-bodyが高さを持たないため、コンテンツ高さ=card-bodyの高さとなるため、寄せをするだけの余白はなく、中央寄せだろうと上寄せだろうと違いはないです。

---

参考：
flex-wrap - CSS: カスケーディングスタイルシート | MDN
Wrap | Flex (フレックス) · Bootstrap v5.0

Comments

[scamee]

ベストアンサーと返信遅れて申し訳ありません。
「card-bodyが高さ」の認識がありませんでした。
解決しました。ご回答ありがとうございました。