li要素の頭揃えが出来ない。

html
1<div class="home">
2        <!-- <div class="container-fluid"> -->
3        <div class="container">
4            <!-- <div class="d-flex flex-column text-center"> -->
5            <div class="d-flex flex-column text-center">
6                <!-- d-flex 指定 column縦並べ-->
7                <div class="row mx-auto">
8                    <div class="col-auto">
9                        <h1 class="font-blue display-3 font-weight-bold">HarborS for Beginner</h1>
10                        <h3 class="font-blue display-5 mb-5 font-weight-bold">駆け出しエンジニア向けコワーキングスペース</h3>
11
12                        <div class="home-text">
13                            <h2 class="display-5 font-weight-bold">現役エンジニアによる</h2>
14                            <h3 class="">
15                                <!-- li要素のサイズ変更のため-->
16                                <!-- <ul class="font-weight-bold"> -->
17                                <ul>
18                                    <li>技術相談</li>
19                                    <li>キャリア相談</li>
20                                </ul>
21                            </h3>
22                            <a style="font-size:35px;" href="#"
23                                class="btn btn-lg active font-write mb-5 pr-5 ml-3 font-weight-bold"
24                                role="button">話しを聞いてみたい</a>
25                        </div>
26                    </div>
27                </div>
28            </div>
29        </div>
30    </div>

1枚目がデザインになり、2枚目の方が現状作成中のLPになります。
そこで質問があるのですが、1枚目のようにli要素の頭揃えが出来なく困っております。

今現在の作成中に対してどのようにしてli要素の頭揃えをすれば良いか教えていただきたいです。
大幅に変えなくてはならなくても問題ありません。

色々自分なりに試した結果出来なかったのでお手数になりますがよろしくお願い致します。

質問方法などに関しては少し大雑把のようになりますが詳細を上手く伝えることが出来ませんでした。
そこに関してはどのようにした方が良い質問になる！
なども良ければ教えていただけるととても嬉しいと思っております。

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

回答2件

ベストアンサー

これで、いかがでしょうか?

.home-text h3 {
  display: flex;
  justify-content: center;
  text-align: left;
}

おそらく、どこかでtext-align: center;を指定していると思います。
リストの箇所だけ、中央揃えではなく左寄せにするために上記ソースコードのように
text-align: left;の追加が必要です。

(h3の子要素にulがあるのが適切かどうかは、調べてほしいです。)

投稿2020/03/09 03:39

編集2020/03/09 10:48

new1ro

総合スコア4528

shinpachi

2020/03/09 10:38

newさん初めまして！コメントありがとうございます！上記に４枚目として写真を添付しましたこのようになった際はいかがすればよろしいでしょうか？

new1ro

2020/03/09 10:49 編集

説明が悪かったかもしれません。 > おそらく、どこかでtext-align: center;を指定していると思います。 > それを解除するためにtext-align: left;が必要です。こちらについて、親要素の中央寄せの指定を、子要素では解除し左寄せにすることが必要、という意図でした。つまり既存の「text-align: center;」は手を加えず「.home-text h3」への指定に「text-align: left;」を追加すればOK、のはずです。本文も編集します。

退会済みユーザー

2020/03/09 11:29

heading/anchor系のタグはブロックタグは基本だめやね。

shinpachi

2020/03/10 13:06

お疲れ様です。 new1roさん少しわからなくなってしまいましたのでhtmlを少し変更して再度新しく載せ直しました。正直ここからどうすればli要素を頭揃えなるかわかりません。もし変更出来そうであれば教えていただきたいです。

shinpachi

2020/03/10 13:08

お疲れ様です。 asahina1979さん再度 html,css,写真に関して載せ直しています。ここからどこが悪くどうすればliの頭揃えになるかわからない状況となっております。もし良ければ教えていただきたいと思います。

new1ro

2020/03/10 13:23 編集

以下を追加してください。 .home-text h3 { display: flex; justify-content: center; text-align: left; } もしできなければ、CSSセレクタの詳細度を上げるか、最悪「!important」を末尾に追加 (display: flex !important;)すると動くはず..、です。意図通りの表示を実現できたら「!important」を消すためにどうしたらいいか、などの検討をお願いします。 ----- こちらで動作を確認したURLは以下です。 https://codepen.io/new1ro/pen/abOEPmp HTML側はタイトルを「xxxxx」などの文字に変更した以外手を加えていません。

shinpachi

2020/03/10 14:53

new1roさんできました！！！！！！！本当にありがとうございます。。。現状としてもう一点li要素で頭揃えできない部分がありますがそちらは今回教えて教えていただいたのを参考にさせていただき作っていこうと思います。引き続き再度別件でわからない部分がありそちらも質問させていただくと思いますのでお時間ある際にのぞいていただきお教えしていただけると幸いです。お手数になりますがよろしくお願い致します。

new1ro

2020/03/10 15:00 編集

お役立ちできたようで、よかったです！あとは、asahina1979さんのおっしゃるとおり、 h3のなかにulがあるのはあまりよくないので、h3をdivなどに変えてクラスをつけて... ということを余裕があればやってもらえるといいかと思います。

shinpachi

2020/03/11 11:51

かしこまりました！！微調整などする際にそちらもしっかり変更していきたいと思います！！本当にありがとうございました！！！また質問させていただく時があると思いますがもしよろしければその時もよろしくお願い致します！！

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