在 Bootstrap 4 Horizontal 表单中,带有文本的 div 如何垂直居中?
这是取自https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form的示例,但表单输入不是纯文本 div,例如“密码在此处”文本:
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-middle">
Password goes here
</div>
</div>
</form>
我尝试了 align-middle、d-inline-block 类,但没有效果。
用于align-self-center
垂直对齐
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-self-center ">
Password goes here
</div>
</div>
</form>
参考:https : //getbootstrap.com/docs/4.3/utilities/flex/#align-self
演示:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-self-center ">
Password goes here
</div>
</div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句