チェックボックスを中央寄席にしたい

Question

CSSでチェックボックスを中央寄席にしたいです。

フォームで、このように約款の下に同意しますチェックボックスを設置しているのですが、こちらを左右中央寄せにならずに困っております。
送信するボタンのように中央寄せにしたいのですが…
アドバイスいただけますと幸いです。

HTML

<div class="container">
                <div>
                    <div>
                        以下フォームに必要事項をご入力ください。                   
                    </div>
                    <div class="card">
                        <form action="select_payment" method="POST" id="order_form" class="h-adr" @submit="regist">
                            <input type="hidden" class="p-country-name" value="Japan">
                            <div class="form_area">
                                <div class="form_column">
                                    <label class="form_label">法人名<span class="required">必須</span></label>
                                    <div class="form_input">
                                        <input type="text" class="form_parts" name="company_name" v-model="company_name" maxlength="60">
                                    </div>
                                </div>                                
                                <div class="form_column">
                                    <label class="form_label">メールアドレス<span class="required">必須</span></label></label>
                                    <div class="form_input">
                                        <input type="text" class="form_parts" name="email" v-model="email" maxlength="80">
                                    </div>
                                </div>
                                <div class="form_column">
                                    <label class="form_label">ご利用開始希望時期</label></label>
                                    <div class="form_input row">
                                        <div>
                                            <input type="text" class="form_parts_sm" name="preferred_start_year" v-model="preferred_start_year" maxlength="4">
                                        </div>
                                        年
                                        <div class="form_tani">
                                            <input type="text" class="form_parts_sm" name="preferred_start_month" v-model="preferred_start_month" maxlength="2">
                                        </div>
                                        月
                                    </div>
                                </div>                                                             
                                <div class="komado_section">
                                    <h2>約款</h2>
                                    <div class="komado block_center">
                                        ■テキストテキストテキストテキストテキストテキストテキストテキスト
                                        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                        テキストテキストテキストテキストテキストテキストテキストテキスト
                                        テキストテキストテキストテキストテキストテキスト
                                    </div>
                                </div>
                                <div class="mt_smal">    
                                    <label class="text_center"><input class="" name="doui" type="checkbox" value="1" v-model="doui">上記約款に同意します。</label>
                                </div>
                            </div>
                            <div class="error" id="result">
                                <ul class="" role="alert">
                                    <li class="ml-4" v-for="error in errors">{{ error }}</li>
                                </ul>
                            </div>
                            <div id="form_submit">
                                <p id="form_has_error"></p>
                                <input type="submit" id="submit_button" value="送信する">
                            </div>
                        </form>
                    </div>
                </div>
            </div>           
        </div>

CSS

body {
    font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1.75;
    color: #333;
    margin: 0;
    background-color: #FFF;
}

h1 {
    text-align: center;
    color: #fff;
    font-size: 30px;
}

h2 {
    text-align: center;
    font-size: 2.0rem;
}

.container {
    padding: 2vw 20vw;
}

.card {
    background-color: #FFF;
    border: 1px solid #EEE;
    margin: 2vw 0vw;
    border-radius: 5px;
    padding: 2vw 2vw 6vw 2vw; 
    /*padding: 5rem;*/
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));
}

.row {
    display: flex;
}

.form_area {
    margin: 0 0 6rem 0;
}

.form_column {
    display: flex;
    justify-content: space-between;
    /*padding: 1.5vw 0; */
    padding: 3.0vw 0 0 0;
}

.form_label {
  width: 20vw;
  text-align: left;
  font-weight: bold;
}

.form_input {
  width: 45vw;
}

.form_parts {
  width: 100%;
  padding: 0.5vw;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #FFF;
}

.form_parts_sm {
    width: 80px;
    padding: 0.5vw;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 3px;
    background-color: #FFF;
}

#submit_button {
    padding: 0.5vw 0.5vw;
    color: #fff;
    background-color: #00B1B2;
    border-radius: 5px;
    display:block;
    width:150px;
    margin:0 auto;
    height: 5rem;
}
 
.komado_section {
    padding: 2vw 0;
}

.komado {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    overflow-y: scroll;
    /*margin:0 auto;
}

.mt_small {
    padding-top: 2rem;
}

.block_center {
    text-align: center;
}

.text_center {
    text-align: center;
}

Answer 1

• 「.komado 」のコメントアウトが中途半端でその後のCSSが有効になっていません
• チェックボックスが収まっているdivのクラス名が「mt_small」ではなく「mt_smal」になっています

その上で、labelがinline処理なので「.mt_small」に「text-align:center」をつけるとよいでしょう

Comments

[mikeko0901]

ありがとうございます！
仰る通り、CSSが効いていませんでした…
text-align: center;でセンター寄せになりました！

Answer 2

下記のクラス名は誤字ではないでしょうか？

  <div class="mt_smal">  // mt_small?

真ん中にするためにcssで
text-align: center;
を指定してみてはどうでしょうか？

.mt_small {
  text-align: center;
}

Comments

[mikeko0901]

ありがとうございます！
text-align: center;
でセンター寄せになりました。