垂直对齐中心引导程序 4 表单组行答案

【问题标题】：Vertical Align Center Bootstrap 4 Form-Group Row垂直对齐中心引导程序 4 表单组行
【发布时间】：2018-02-01 01:46:30
【问题描述】：

我有一个如下所示的表单：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal card card-body my-bg">

        <div class="form-group row justify-content-center align-content-center">
            <div class="col-md">
                @Html.Label("My Label", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestName, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
            <div class="col-md">
                @Html.Label("Label Two", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestProperty, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
        </div>
    </div>
}

如您所见，我尝试了justify-content-center align-content-center，但它们并没有垂直居中我的表单。

如何使表单垂直居中？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

垂直中心相对于容器的高度，在这种情况下，容器 (.card) 没有定义高度。

给card 一个高度，使用justify-content-center 使卡片内容垂直居中...

https://www.codeply.com/go/FdHqOtS3Av

.card {
    min-height: 300px;
}

【讨论】：

【解决方案2】：

我不确定我是否理解表单左对齐的问题。根据您提供的代码，每个表单元素将占用其各自列的 100%...

话虽如此，您的代码中存在结构错误，可能会导致输出低于预期。您将 row 正确应用到 form-group 但您没有为嵌套网格重复 row。您也没有使用align-items-center，它将垂直定向子列对应于最大高度。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="card card-body">
  <div class="row align-items-center">
    
    <div class="col">
      <div class="form-group row">
        <label class="col-form-label col-12">My Label</label>
        <div class="col-12 my-5 ">
          <textarea name="TestName" class="form-control"></textarea>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="form-group row">
        <label class="col-form-label col-12">Label Two</label>
        <div class="col-12">
          <textarea name="TestProperty" class="form-control"></textarea>
        </div>
      </div>
    </div>
    
  </div>
</div>

在上面的示例中，我重新构建了您的表单以正确应用 row align-items-center，然后在每个嵌套的 col 中移动您的 form-group row 组合。

我还将断点设置为最小选项以便在 SO 中查看它们，并将my-5 应用于第一个<textarea> 容器以说明align-items-center 如何使同级列垂直居中。

【讨论】：