使用 css 和 bootstrap 4 居中输入答案

【问题标题】：Centering inputs with css and bootstrap 4使用 css 和 bootstrap 4 居中输入
【发布时间】：2018-10-30 14:15:18
【问题描述】：

我有一个表格，我想在页面上居中。标签居中，但由于某种原因，我无法使用表单控件类将输入居中。

现在是这样渲染的……

[编辑：表单控件内部的display: block; 导致了这个问题。不知道为什么，我该如何禁用它]

#centered {
  text-align: center;
}

<div id='centered'>
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </div>

【问题讨论】：

您的示例显示了居中的表单。请确保您提供了minimal, complete, and verifiable example。
另外我注意到您正在重复使用 id="form-group"，因为 id 名称应该是唯一的（仅限 1）
不确定为什么该示例有效但实际代码无效。我附上了一张实际输出的图片。
我看到显示：块；在表单控制中导致问题。我怎么能把它关掉。不知道为什么会导致问题。
因为d-block 制作了一个元素block。 block 元素默认左对齐。顺便说一句，span 不能包含 h5，块元素。

标签： html css bootstrap-4

【解决方案1】：

您可以尝试更改该div内所有form-control的display属性：

 #centered .form-control {
  display: inline;
}

【讨论】：

不，没听懂。我实际上做了一个新的类，叫做sexy-input。除了display: block 之外，我将所有表单控件属性都放入其中，但这似乎很脏，我希望有更干净的东西。

【解决方案2】：

使用类mx-auto

/* CSS used here will be applied after bootstrap.css */
#centered {
  text-align: center;
  width:100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id='centered' class="mx-auto">
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </div>

【讨论】：