我在水平表单中有一个表单组。在这个表单组中,右边的元素高于左边的元素。出于这个原因,我想在其行中垂直居中左侧元素。例如:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
<div class="col-sm-10"> <!-- higher element -->
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<br>Random stuff
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
Email1
当前显示在其自身行的顶部,如 this plunker snippet 所示.编辑:所以为了澄清我的意图,这是当前状态:
这就是我想要的(蓝色区域是前面提到的“行”):
最佳答案
如果您准备放弃对某些“旧”浏览器的支持,您可以使用 flexbox 功能(参见 caniuse.com flex)
<div class="form-group flex-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<br>Random stuff
</div>
</div>
@media (min-width: 768px) {
.flex-group {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.form-horizontal .flex-group .control-label {
padding-top: 0;
}
}
http://plnkr.co/edit/BQ6C4LGiL4oe1ZQTQ3Ys
关于forms - Bootstrap : Vertically center label in form-group,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29968859/