html表单和css：无法居中项目

Posted 2023-03-05

【中文标题】html表单和css：无法居中项目

【英文标题】：html form and css: cannot center items

【发布时间】：2017-03-07 01:10:15

【问题描述】：

我在以 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>

这是现在的样子：

这里是我想要的：

我不明白我的错误。我为相关项目（表单和按钮）设置了宽度和边距=auto。

【参考方案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>

【讨论】：

快速简单。感谢您的澄清。需要等待几分钟才能接受答案:)

当然！！欲了解更多信息：***.com/questions/19076919/…

这个链接非常有用。现在我明白了块和内联块之间的区别——这确实是有道理的！

【参考方案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>