Centring a form

Question

I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.

    form {
    margin: auto;
    }

     .wrapper {
    margin: auto;
    width: 50%;
    padding: 0px;
    display: table;
    }


    fieldset {

    margin: 1em;
    padding: 1em;
    border-color: crimson;
    border-radius: 20px;
    border-style: double;
    border-width: 10px;
    width: 70%;
    }

 <div class="wrapper">
        <form id="form1">
            <fieldset>
                <legend>Your contact details</legend>
                <p class="formtext">Name <em>(required)</em></p>
                <input type="text" id="name" required placeholder="Forname & Surname" />
                <p class="formtext">Email Address <em>(required)</em></p>
                <input type="text" id="email" required placeholder="example@example.com" />
                <p class="formtext">Website Address</p>
                <input type="text" id="url" placeholder="https:www.example.com" />
                <p class="formtext">Message</p>
                <textarea id="message" required></textarea>
                <p class="formtext">Would you like to recieve regular email updates?</p>
                <select name="cars">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>

                </select>

            </fieldset>
            <fieldset>
                <legend>Would you like more information?</legend>
                <label class="button" for="information-yes">
                    <input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
                <label class="button" for="information-no">
                    <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
            </fieldset>
            <input type="submit" value="Click to send" />
        </form>
    </div>

score 0 · Answer 1 · answered Jan 12 '19 at 18:13

add text-align: center; to the form tag

form {
  margin: auto;
  text-align: center;
}
.wrapper {
  margin: auto;
  width: 50%;
  padding: 0px;
  display: table;
}

fieldset {
  margin: 1em;
  padding: 1em;
  border-color: crimson;
  border-radius: 20px;
  border-style: double;
  border-width: 10px;
  width: 70%;
}

<div class="wrapper">
  <form id="form1">
    <fieldset>
      <legend>Your contact details</legend>
      <p class="formtext">Name <em>(required)</em></p>
      <input type="text" id="name" required placeholder="Forname & Surname">
      <p class="formtext">Email Address <em>(required)</em></p>
      <input type="text" id="email" required placeholder="example@example.com">
      <p class="formtext">Website Address</p>
      <input type="text" id="url" placeholder="https:www.example.com">
      <p class="formtext">Message</p>
      <textarea id="message" required></textarea>
      <p class="formtext">Would you like to recieve regular email updates?</p>
      <select name="cars">
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>Would you like more information?</legend>
      <label class="button" for="information-yes">
        <input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
        <label class="button" for="information-no">
          <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
    </fieldset>
    <input type="submit" value="Click to send" />
  </form>
</div>

form is also center, give me image of your hope and i will make it — Nisharg Shah, Jan 12 '19 at 18:58

score 0 · Answer 2 · answered Jan 12 '19 at 18:30

<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.

HTML

 <div class="wrapper">
    <form id="form1">
        <fieldset>
            <legend>Your contact details</legend>
            <div class="form-center">
            <p class="formtext">Name <em>(required)</em></p>
            <input type="text" id="name" required placeholder="Forname & Surname" />
            <p class="formtext">Email Address <em>(required)</em></p>
            <input type="text" id="email" required placeholder="example@example.com" />
            <p class="formtext">Website Address</p>
            <input type="text" id="url" placeholder="https:www.example.com" />
            <p class="formtext">Message</p>
            <textarea id="message" required></textarea>
            <p class="formtext">Would you like to recieve regular email updates?</p>
            <select name="cars">
                <option value="yes">Yes</option>
                <option value="no">No</option>

            </select>
</div>
        </fieldset>
        <fieldset>
            <legend>Would you like more information?</legend>
          <div class="form-center">
            <label class="button" for="information-yes">
                <input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
            <label class="button" for="information-no">
                <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
          </div>
        </fieldset>
        <input type="submit" value="Click to send" />
    </form>
</div>

CSS

form {
  margin:auto;
}

div.form-center {
  width: 60%;
    margin-left: auto;
    margin-right: auto;
}

 .wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}


fieldset {

margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}

If you don't want to center content in the second fieldset then you can remove
from the second fieldset. — YATIN GUPTA, Jan 13 '19 at 05:50
it isnt the content i want center its the whole form, as it appears slightly the the left — Oli Knight, Jan 13 '19 at 17:58

score 0 · Answer 3 · edited Jan 14 '19 at 19:05

0

You may want to use Flexbox.

On the fieldset selector add the following 3 lines of code:

display: flex;
flex-direction: column;
align-items: center;

Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.

Your example would then remain the same, only for the fieldset selector you have the following css properties:

fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em auto;
    padding: 1em;
    border-color: crimson;
    border-radius: 20px;
    border-style: double;
    border-width: 10px;
    width: 70%;
}

EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.

edited Jan 14 '19 at 19:05

Mr Lister

45,515
15
108
150

answered Jan 12 '19 at 18:44

Ivica Pesovski

827
7
29

This is for Univeristy Coursework and the examiners use Chrome to check so im guessing it wont display properly on Chrome? – Oli Knight Jan 12 '19 at 19:28
Yes, if you are using `
` it won't work properly. If you change it with `
` for example it will work on every browser. But then you will have hard time designing that fieldset header, so for your particular case, I guess using `text-align: center` on the `
` element would do the trick.
– Ivica Pesovski Jan 13 '19 at 09:52
I tried that but text-align only aligns the text in the middle of the form, but the form stays in place – Oli Knight Jan 13 '19 at 17:57

score 0 · Answer 4 · answered Jan 12 '19 at 19:50

0

form {
    /*margin: auto; Not required as long as you didn't specify the width of the form*/ 
    text-align: center;
}
fieldset {
    /*centering the fieldset horizontally*/ 
    margin: 1em auto;
    ...
}

answered Jan 12 '19 at 19:50

Mohammed Al-Tamimi

37
4

margin: auto; is used to center elements only if it's width already defined. – Mohammed Al-Tamimi Jan 13 '19 at 19:53

Centring a form

4 Answers4