html form and css: cannot center items

Question

I have some troubles to center items in html form. A very simple example here:

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
}
#formLogin {
  margin: auto;
  width: 60%;
  display: inline-block;
}
#btn {
  margin: auto;
  display: inline-block;
  width: 200px;
}

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

Here is how appears now:

and here how I want:

I don't understand my mistake. I set for the relevant items (form and button) both a width and margins=auto.

score 7 · Accepted Answer · answered Oct 25 '16 at 05:54

7

Set display: block; to #formLogin and #btn

#formLogin {
    margin: auto;
    width: 60%;
    display: block;
}

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
}

#formLogin {
  margin: auto;
  width: 60%;
  display:block;
}

#btn {
  margin: auto;
  display:block;
  width: 200px;
}

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

answered Oct 25 '16 at 05:54

Abhishek Pandey

13,302
8
38
68

Quick and easy. Thanks for the clarification. Need to wait few minutes to accept the answer :) – Mark Oct 25 '16 at 05:59
Sure!! For more info: http://stackoverflow.com/questions/19076919/marginauto-with-inline-block – Abhishek Pandey Oct 25 '16 at 06:06
1

This link is very useful. Now I understand the difference between block and inline-block - and it make sense, indeed! – Mark Oct 25 '16 at 13:58

score 0 · Answer 2 · answered Oct 25 '16 at 06:01

text-align center in

 #rectLogin

And set display block, and text-align left in

#formLogin

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
  text-align:center;
}

#formLogin {
  margin: auto;
  width: 60%;
  display: block;
  text-align: left;
}


#btn {
  margin: auto;
  display: block;
  width: 200px;
}

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

html form and css: cannot center items

2 Answers2