bootstrapの実装について

bootstrapをつかって現在LP作成をしているのですが、要素を中央寄せにしつつ縦に要素を積みたいのですがおすすめの組み方などあればおしえていただきたいです。

できる限りCSSは使わず取り組みたいと考えています

html
1<div class="container-fluid">
2        <div class="d-flex flex-column text-center">
3            <div class="home-title">
4                <h1 class="font-blue">○○</h1>
5                <h3 class="font-blue">○○</h3>
6            </div>
7            <div class="home-text">
8                <h3>○○</h3>
9                <ul>
10                    <li>○○</li>
11                    <li>○○</li>
12                </ul>
13                <a href="#" class="btn btn-lg active font-write" role="button">○○</a>
14            </div>
15        </div>
16    </div>

現状はこのようにd-flex flex-columnで主軸を上から下に切り替えてtext-centerで中央寄せにしています

<div class="d-flex justify-content-center">...</div> にした場合は子要素まで全て横並びになってしまい断念しました。

こちらの方法以外で要素を縦並べにしつつ中央寄せにする方法はこっちのがいいよ！
などあればぜひ教えていただきたいと思います。

お手数になりますがよろしくお願いいたします。

kei344

2020/03/04 11:41

「できる限りCSSは使わず」HTMLはCSSを使って位置等の表現をしており、BootstrapもCSSを含みます。表現の調整をお願いします。

shinpachi

2020/03/05 08:21

keiさんコメントありがとうございます！わざわざご指摘いただきありがとうございます！後ほど調整します！

行動規範の内容に同意します

回答1件

ベストアンサー

flex-direction プロパティを column に設定した場合には横方向の配置の制御は交差軸で行うことになるため、 justify-content プロパティではなく align-items プロパティを使う必要があります。align-items-center クラスを用いて質問者さんの実現したいことは行えると思います (動作確認用リンク)。

HTML
1<div class="container-fluid">
2  <div class="d-flex flex-column align-items-center">
3    <div class="home-title">
4      <h1 class="font-blue">○○</h1>
5      <h3 class="font-blue">○○</h3>
6    </div>
7    <div class="home-text">
8      <h3>○○</h3>
9      <ul>
10        <li>○○</li>
11        <li>○○</li>
12      </ul>
13      <a href="#" class="btn btn-lg active font-write" role="button">○○</a>
14    </div>
15  </div>
16</div>

投稿2020/03/04 11:45

s8_chu

総合スコア14731

shinpachi

2020/03/04 12:53

s8さん初めまして！返信ありがとうございます！先ほど確認させていただきました。こちらの説明不足になります先に謝らせていただきます、 <h1 class="font-blue">アイウエオ</h1> <h3 class="font-blue">アイウエオ</h3> 上記の部分になるのですがh1はタイトルとして考えています。その中でh1とh3の左揃えになっておりこちらの部分を変更(左揃いではなく自然な)したいのですがその場合ｎはs8さんはどのような組み合わせにしますでしょうか？僕の考えとしては無理やりにはなりますがh3に直接margin:leftでずらす考えしか現段階で出てきませんでした。お手数になりますがよろしくお願い致します。

s8_chu

2020/03/04 13:25 編集

> その中でh1とh3の左揃えになっておりこちらの部分を変更(左揃いではなく自然な)したいのですがその場合ｎはs8さんはどのような組み合わせにしますでしょうか？見出しの段階ごとに余白が必要なのであれば、各見出しごとに `div` 要素で囲み `margin-left` プロパティを適用するか、一般兄弟結合子を用いて `margin-left` プロパティを適用します。 Bootstrap のクラスとしては、 Spacing ユーティリティを使うことが出来ると思いますが、より詳細な制御をするためには直接 CSS を記述する以外に方法はありません。

shinpachi

2020/03/05 08:23

やはりその手段が最適ですか！ご教授いただきありがとうございます！！またわからなければ質問させていただきますのでその時はよろしくお願いいたします。

行動規範の内容に同意します