前提・実現したいこと
先ほどBootstrapで学習をはじめサイト模写をしているのですが、containerの中身(h1,p,aタグ)は縦に並べた状態で、縦中央揃えにしたいです。2時間ほどいろいろなサイトでの方法を試したのですが、うまくいきません。
該当のソースコード
html
1<header> 2 <div class="cover text-white"> 3 <div class="container"> 4 <h1 class="display-4 mb-4 font-weight-bold">AAAAAA</h1> 5 <p class="pb-4">BBBBBBB</p> 6 <a href="" class="btn btn-light text-dark btn-lg font-weight-bold">CCCCCC</a> 7 </div> 8 </div> 9</header>
試したこと
html
1<style>.box{ 2 display:inline-block; 3 } 4</style> 5 6<header> 7<div class="cover text-white"> 8 <div class="container"> 9 <div class="row"> 10 <div class="col align-self-center box1"> 11 <h1 class="display-4 mb-4 font-weight-bold">旅を贈ろう。</h1> 12 <p class="pb-4">Airbnbギフトカードで、世界をぐんと身近に</p> 13 <a href="" class="btn btn-light text-dark btn-lg font-weight-bold">ギフトカードを登録</a> 14 </div> 15 </div> 16 </div> 17 </div> 18</header>
align-self-centerというものが備わっているようなので、それを使ってみましたが変わりませんでした。
要素を変更したら変わるかなと思い、containerクラスの中身をinline-blockにしてみましたが結果は変わらずでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー