Mark Mark - 1 month ago 6
CSS Question

html form and css: cannot center items

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

https://jsfiddle.net/a9cnuypz/

html



<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>


css



#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;
}


Here is how appears now:

actual

and here how I want:

desired

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

Answer

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>