无法将表单输入字段移动到中心[重复]答案

【问题标题】：unable to move form input field to center [duplicate]无法将表单输入字段移动到中心[重复]
【发布时间】：2020-08-24 22:13:30
【问题描述】：

我正在尝试构建一个小型 ToDo 应用程序。我试图将input 字段和提交按钮放在中心，但对齐到左侧。

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  align-items: center;
  margin: auto;
}

#id-button {
  margin: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <h3>Add New ToDo</h3>
    <div class="form-group">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
</div>

JSFiddle

有什么建议吗？

【问题讨论】：

您的示例将它们放在中心，或者？你什么意思
@ajobi，检查底部的我的 JSFiddle 链接。

标签： html css

【解决方案1】：

你可以这样做：

当您寻找内容居中时，CSS 有一个名为 flex 的漂亮类和一个名为 justify-content:center; 的属性，它将负责对齐。

更多关于Justify-content

添加这个：

#todo .form-group {
 display: flex;
 margin: 0 auto;     
 justify-content: center;
}

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  display: flex;
  margin: 0 auto;
  justify-content: center;
}

#id-button {
  margin: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="todo">
  <p>
    <h3>
      Add New ToDo
    </h3>
    <div class="form-group">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">
            Submit
            </button>
      </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以将 .form-group 的 css 修改为以下用户正确指出的以下内容。 justify-content 是解决它的正确方法。

#todo .form-group {
  display: flex;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}

但是由于您使用引导程序作为 css 框架。您还可以在<div class="form-group"> 的开头添加<div class="col-xs-4"></div> 作为第一个孩子。有关网格结构，请参阅 Bootstrap 文档。 Bootstrap Docs

【讨论】：

【解决方案3】：

form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}     

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <h3>Add New ToDo</h3>
    <div class="form-group">
      <div class="col-xs-4">
       <form>
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
       </form>
      </div>
    </div>
</div>

【讨论】：

【解决方案4】：

我对您的代码有一些注意事项：

您的<p> 标签没有结束符。
尝试删除“form-group”<div> 和 class="col-xs-4"。
调整输入大小并输出<br> 标签。您的代码将如您所愿。

col-xs-4 和（我认为）form-group 是 Bootstrap 类，它们会覆盖您尝试执行的任何操作。因此，要么将您的代码包装在不同的 <div> 中，要么在您的 CSS 中覆盖它。此外，如果您想使用 col 类，则必须将该 div 包装在另一个 <div> 和 "row" 类中。

【讨论】：