带靴子的偏移量和中心容器

Question

我正在尝试使用引导程序将标头和输入字段居中。我无法使输入字段与标题居中对齐。如果有人有更好的方法，请告诉我。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1 class="display-4 text-center">Weight Converter</h1>
      <form>
        <div class="form-group">
          <input
            id="lbsInput"
            type="number"
            class="form-control form-control-lg"
            placeholder="Enter Weight..."
          />
        </div>
      </form>
      <div id="output">
        <div class="card">
          <div class="card-block">
            <h4>Grams:</h4>
            <div id="gramsOutput"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您的HTML不完整，没有CSS。但是根据您所拥有的内容，CSS中简单的margin: auto;应该会为您将元素居中。

如果您想获得更多控制权，则应查看flexbox。发布更多代码，您将获得更多帮助。

编辑：感谢您的代码：这可以使输入居中。我刚刚验证了。让我知道您是否需要更多帮助。欢呼声

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 class="display-4 text-center">Weight Converter</h1>
        <form>
          <div class="form-group" id="centerParent">
            <input
              id="lbsInput"
              type="number"
              class="form-control form-control-lg"
              placeholder="Enter Weight..."
            />
          </div>
        </form>
        <div id="output">
          <div class="card">
            <div class="card-block">
              <h4>Grams:</h4>
              <div id="gramsOutput"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


<style>

#centerParent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

</style>