チェックボックスの要素全体は中央・テキスト本体は左寄せにする方法

Question

前提・実現したいこと

参考画像

上記のような、
画面幅に対しては中央配置、ただし文字自体は左寄せを実現したいです。
今回は問い合わせフォームのチェックボックスでの実装を目指しています。

正解の記述だけではなく、私の勉強のために「なぜその記述を追加したのか」も合わせて解説をお願いいたします。
お手数おかけしますが、お願いいたします。

発生している問題・エラーメッセージ

text-alignによって中央配置にはなるが、さらにそれを左寄せにする実装方法で混乱しています。

該当のソースコード

<main id="contact" class="contact main-wrap">
        <h1>お問い合わせ</h1>
        <div class="contact__container">
            <h3>カテゴリ</h3>
            <div class="form-items">
                <div class="form-item">
                    <input id="category1" name="category" value="予約について" type="checkbox">
                    <label for="category1">予約について</label>
                </div><br>
                <div class="form-item">
                    <input id="category2" name="category" value="資料請求について" type="checkbox">
                    <label for="category2">資料請求について</label>
                </div><br>
                <div class="form-item">
                    <input id="category3" name="category" value="リクルート" type="checkbox">
                    <label for="category3">リクルート</label>
                </div><br>
                <div class="form-item">
                    <input id="category4" name="category" value="その他お問い合わせ" type="checkbox">
                    <label for="category4">その他お問い合わせ</label>
                </div>
            </div>
        </div>
    </main>

.main-wrap {
    height: auto;
    width: 100%;
}

/*============
お問い合わせ
 ============*/
.contact {
    padding: 0 20px;
}

.contact__container {
    text-align: center;
}

#contact h3 {
    font-size: 1.3em;
    font-weight: bold;
    background-color: #EBEBEB;
    border-top: 1px solid #BCBCBC;
    border-bottom: 1px solid #BCBCBC;
    padding: 5px 0;
    margin-bottom: 5px;
}

.form-item {
    display: inline-block;
    text-align: left;
}

試したこと

親の要素にはtext-align:center;
左寄せしたい要素をインラインブロック要素にし、text-align:left;
上記のようにすると実装できるというのを調べて見つけたのですが思い通りになりませんでした。

補足情報（FW/ツールのバージョンなど）

試用ツール：vscode

Answer 1

.contact__container h3 {
    text-align: center;
}

.contact__containerの後にh3を追加してみでください。
欲しいのはこの様でしょうか？

Answer 2

.form-item {
  display: inline-block;
  text-align: left;
}

上記コードを下記に修正すれば、いいでしょう。

.form-items {
  display: inline-block;
  text-align: left;
}

text-align は要素内のテキスト(インライン要素)の配置を指定するプロパティです。
インラインブロック要素も対象になります。

.form-itemにtext-align: left;を設定しても.form-itemは左寄せにはなりません。
親要素の.form-itemsに設定すると、.form-itemsの範囲内で.form-itemは左寄せになります。

それだけだと、.form-itemsはブロック要素なので幅は親要素の幅と同じになりますので、コンテナブロック内で左端に配置されます。
.form-itemsにdisplay: inline-block;を設定してインラインブロックにすると、幅は子要素の最大幅と同じになります。
親要素の.contact__containerにはtext-align: center;が設定してあるので、.form-itemsは中央に配置されます。

文章だけでは分かりづらいかも知れませんので、下記の画像をみると直感的に理解しやすいかもです。

.form-itemsにピンクの背景色、.contact__containerに水色の背景色をつけてます。

Comments

[kumeshin510]

ご回答誠にありがとうございます。
メンターになってもらいたいと思うほどの丁寧な解説で、とても勉強になりました。

左寄せにしたい内容がinputとlabelなので、その親要素に対して設定すればいいものだと思い込みをしてしまいました。

貴重なお時間の中、分かりやすい例も添付していただき感謝しております。
今後の勉強に活かします！