contactのformが中央寄せにならないです。

◎解決したいこと

現状

理想

理想の画像のように、「contact」のタイトルに対して、下にある「input」、「textarea」を中央寄せにしたいです。

「contact__form」の横幅を変更してみましたが、inputタグとtextareaタグの右にある文字の横幅を含んで、「contact」のタイトルの中央寄せになるので、inputタグとtextareaタグが上手く中央寄せになりませんでした。

教えて頂けると幸いです。

◎HTML

 
    <section class="contact">
        <div class="contact__inner">
    
            <div class="contact__title">
                <h2>CONTACT</h2>
            </div>
    
            <div class="contact__form">
    
                <div class="form__item">
                    <p class="form__item__label">
                        Name
                    </p>
                    <input type="text" class="form-Item-Input">
                </div>
    
                <div class="form__item">
                    <p class="form__item__label">
                        E-mail
                    </p>
                    <input type="text" class="form-Item-Input">
                </div>
    
                <div class="form__item">
                    <p class="form__item__label">
                        Message
                    </p>
                    <textarea class="Form-Item-Textarea"></textarea>
                </div>
    
                <div class="form__item__textarea">
                    <input type="submit" class="form-Btn" value="SEND">
                </div>
    
            </div>
    
    
        </div>
    </section>

◎CSS

.contact {
    padding-top: 100px;
    .contact__inner {
        .contact__title {
            text-align: center;
            padding: 50px 0;
            h2 {
                font-size: 3rem;
                margin: 0 auto;
                width: 200px;
                background-image: linear-gradient( transparent 33%, pink 33%, pink 66%, transparent 66% );
            }
        }
        .contact__form {
            max-width: 720px;
            margin: 0 auto;
            .form__item {
                display: flex;
                // align-items: center;
                margin-bottom: 20px;
                .form__item__label {
                    font-size: 2rem;
                    width: 100%;
                    max-width: 150px;
                }
                .form-Item-Input {
                    width: 100%;
                    max-width: 570px;
                    height: 40px;
                    background-color: #efefef;
                    border: none;
                }
                .Form-Item-Textarea {
                    width: 100%;
                    max-width: 570px;
                    height: 200px;
                    background-color: #efefef;
                    border: none;
                }
            }
            .form__item__textarea {
                text-align: right;
                .form-Btn {
                    max-width: 570px;
                    width: 100%;
                    height: 40px;
                    background-color: #008000;
                    color: #fff;
                    border: none;
                }
            }
        }
    }
}

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

回答2件

ベストアンサー

cssを以下のように修正してみてください。

scss
1// （途中から書きます）
2.contact__title {
3    // text-align: center;    削除
4    display: flex;    // 追加
5    justify-content: center;    // 追加
6    padding: 50px 0;
7    h2 {
8        flex: 0 0 auto;    // 追加
9        font-size: 3rem;
10        margin: 0 auto;
11        //width: 200px;    削除
12        background-image: linear-gradient( transparent 33%, pink 33%, pink 66%, transparent 66% );
13    }
14}
15
16.contact__form {
17    max-width: 870px;    // 変更
18// （以下、省略）

投稿2020/11/21 08:58

cerfweb

総合スコア1907

退会済みユーザー

2020/11/21 09:08

ありがとうございました！無事解決いたしました！

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

ラベル.form__item__labelの幅(150px)だけ右にずらせばいいでしょう。

scss
1        .contact__title {
2            text-align: center;
3            padding: 50px 0 50px 150px; //修正
4            h2 {
5                font-size: 3rem;
6                margin: 0 auto;
7                width: max-content; //修正
8                background-image: linear-gradient( transparent 33%, pink 33%, pink 66%, transparent 66% );
9              padding: 0 20px;    //追加            
10            }