我有一个看起来像这样的表单:
@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
,但它们并没有垂直居中我的表单。
如何将表单垂直居中?
垂直中心是相对于容器的高度,在这种情况下,容器(.card
(没有定义高度。
给card
一个高度,用justify-content-center
将卡片内容垂直居中......
https://www.codeply.com/go/FdHqOtS3Av
.card {
min-height: 300px;
}
我不确定我是否理解您对表单左对齐的问题。 根据您提供的代码,每个表单元素将占用其各自列的 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
如何导致同级列垂直居中。