Home>

◎ I want to solve

Current status

Ideal

Like the ideal image, I want to center the "input" and "textarea" below the title of "contact".

I tried changing the width of "contact__form", but the width of the characters to the right of the input tag and textarea tag is included, and the title of "contact" is centered, so the input tag and textarea tag are well centered. It didn't come close.

I would appreciate it if you could tell me.

◎ HTML

<section>
        
            
                 CONTACT 
            
            
                
                  <p>
                        Name
                  </p>
                  <input type = "text">
                
                
                  <p>
                        E-mail
                  </p>
                  <input type = "text">
                
                
                  <p>
                        Message
                  </p>
                  <textarea></textarea>
                
                
                  <input type = "submit" value = "SEND">
                
            

        
  </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;
                }
            }
        }
    }
}
  • Answer # 1

    Try modifying css as follows.

    // (Write from the middle)
    .contact__title {
        // text-align: center;Delete
        display: flex;// Add
        justify-content: center;// Add
        padding: 50px 0;
        h2 {
            flex: 0 0 auto;// Add
            font-size: 3rem;
            margin: 0 auto;
            // width: 200px;Delete
            background-image: linear-gradient (transparent 33%, pink 33%, pink 66%, transparent 66%);
        }
    }
    .contact__form {
        max-width: 870px;// change
    // (Omitted below)

  • Answer # 2

    label.form__item__labelYou should shift it to the right by the width of (150px).

          .contact__title {
                text-align: center;
                padding: 50px 0 50px 150px;// Fix
                h2 {
                    font-size: 3rem;
                    margin: 0 auto;
                    width: max-content;// fix
                    background-image: linear-gradient (transparent 33%, pink 33%, pink 66%, transparent 66%);
                  padding: 0 20px;// Added
                }

    Also, the bar in the background of the title was also off, so I fixed it.