HTML表单和CSS：无法居中项目

Question

我在HTML表单中居中元素方面遇到了一些问题。这里有一个非常简单的例子：

https://jsfiddle.net/a9cnuypz/

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

这是现在的样子： 这是我想要的样子： 我不明白我的错误。我已经为相关项目（表单和按钮）设置了宽度和margins=auto，但是没有达到预期的效果。

- Mark

Answer 1

将 display: block; 应用到 #formLogin 和 #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>

- Abhishek Pandey

---

快速简便。感谢澄清。需要等待几分钟才能接受答案 :) - Mark

当然可以！！欲知更多信息：https://dev59.com/TWIk5IYBdhLWcg3wqPsi - Abhishek Pandey

这个链接非常有用。现在我明白了块级元素和行内块级元素之间的区别 - 而且确实很有道理！ - Mark

Answer 2

文本对齐方式是居中

 #rectLogin 

设置显示块，并将文本对齐到左侧

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

- Nagy István