Centering a form within a flexbox

Question

I am currently doing an assignemnt for my diploma of website development.. I am struggling to get a form to be centred within a flexbox.

<div id="article_right">
                <h2>Contact Us!</h2>
                <form id="contact_form">
                    <div class="input-box">
                        <label for="contact_name">Full name:</label>
                        <input type="text" id="contact_name" name="contact_name" placeholder="Name">
                    </div>
                    <div class="input-box">
                        <label for="contact_phone">Mobile number:</label>
                        <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
                    </div>
                    <div class="input-box">
                        <label for="contact_email">Email address:</label>
                        <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
                    </div>
                    <div class="input-box">
                        <label for="contact_message">Message:</label>               
                        <textarea rows="4" cols="40" id="contact_message" name="contact+message" style="resize: none"></textarea>
                    </div>
                    <div class="button">
                        <button type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </article>

/* Article Styling Definitions */
article {
    display: flex;
    flex: 3;
    background-color: transparent;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}

I have tried everything and I just can't seem to get it to fill the right flexbox and for the form elements to be centered. The button and h2 are but the form itself won't

score 0 · Answer 1 · answered Oct 09 '21 at 05:21

0

It's true, just set width to <form> for example max-width:600px

answered Oct 09 '21 at 05:21

Hossein Azizdokht

748
3
17

score 0 · Answer 2 · answered Oct 09 '21 at 05:22

What You are doing is ok. Just try to add some width to the form, example:

https://jsfiddle.net/nk9owjyz/3/

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}

score 0 · Answer 3 · answered Oct 09 '21 at 05:26

Just update your article css

article {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    background-color: transparent;
}

Try Full Code

        /* Article Styling Definitions */
article {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    background-color: transparent;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}

    <article id="article">
        <div id="article_right">
            <h2>Contact Us!</h2>
            <form id="contact_form">
                <div class="input-box">
                    <label for="contact_name">Full name:</label>
                    <input type="text" id="contact_name" name="contact_name" placeholder="Name" />
                </div>
                <div class="input-box">
                    <label for="contact_phone">Mobile number:</label>
                    <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number" />
                </div>
                <div class="input-box">
                    <label for="contact_email">Email address:</label>
                    <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address" />
                </div>
                <div class="input-box">
                    <label for="contact_message">Message:</label>
                    <textarea rows="4" cols="40" id="contact_message" name="contact+message"
                        style="resize: none"></textarea>
                </div>
                <div class="button">
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    </article>

score 0 · Accepted Answer · answered Oct 09 '21 at 05:40

The problem is that you are setting article to display flex but you are setting what is to happen with the flex to its child div.

I am not absolutely sure which you want (perhaps both) but this snippet adds display flex just to the child div to at least demonstrate that something changes:

<style>
  body {
    height: 100vh;
    display: inline-block;
    width: 100vh;
  }
  /* Article Styling Definitions */
  
  article {
    height: 100%;
    position: relative;
    display: flex;
    flex: 3;
    background-color: transparent;
  }
  
  #article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
  }
  
  #article_right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
  }
  
  .cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
  }
  
  form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
  }
  
  .input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
  }
  
  label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
  }
  
  input,
  textarea {
    width: 150%;
  }
</style>

<body>
  <article>
    <div id="article_right">
      <h2>Contact Us!</h2>
      <form id="contact_form">
        <div class="input-box">
          <label for="contact_name">Full name:</label>
          <input type="text" id="contact_name" name="contact_name" placeholder="Name">
        </div>
        <div class="input-box">
          <label for="contact_phone">Mobile number:</label>
          <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
        </div>
        <div class="input-box">
          <label for="contact_email">Email address:</label>
          <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
        </div>
        <div class="input-box">
          <label for="contact_message">Message:</label>
          <textarea rows="4" cols="40" id="contact_message" name="contact+message" style="resize: none"></textarea>
        </div>
        <div class="button">
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  </article>
</body>

You probably want to set flex-direction to get the contact us centered above the form.

Centering a form within a flexbox

4 Answers4