twitter-bootstrap Bootstrap：在表单组中垂直居中标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29968859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Vertically center label in form-group
提问by Bastian
I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance:
我在水平表格中有一个表格组。在这个表单组中，右边的元素高于左边的元素。出于这个原因，我想在其行中垂直居中左侧元素。例如：
<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>
Email1is currently shown at the top of its own row as can be seen in this plunker snippet.
Email1当前显示在它自己的行的顶部，可以在这个 plunker 代码段中看到。
EDIT: So to clarify my intentions, this is the current state:
编辑：所以为了澄清我的意图，这是当前状态：
And this is what I would like to have (the blue area is the previously mentioned "row"):
这就是我想要的（蓝色区域是前面提到的“行”）：
回答by Sherbrow
If you are ready to drop support for some "old" browsers, you can use the flexbox features (see caniuse.com flex)
如果您准备放弃对某些“旧”浏览器的支持，您可以使用 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;
}
}
回答by dong kuk Park
You could just set the line-height equal to the height using CSS. Also, don't repeat domain IDs, you can only use id="inputEmail3" once. I changed both IDs to fit the text.
您可以使用 CSS 将行高设置为等于高度。另外，不要重复域 ID，您只能使用 id="inputEmail3" 一次。我更改了两个 ID 以适应文本。
CSS
CSS
label[for="inputEmail3"]{
height: 74px;
line-height: 74px;
}
HTML
HTML
<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="inputEmail1" 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="inputEmail2" placeholder="Email">
</div>
</div>
</form>
回答by Macsupport
If you just want label1 to drop down as in your image, can't you just add a class giving it some padding-top? Like in this jsfiddle
如果你只是想让 label1 像你的图片一样下拉，你不能只添加一个类给它一些 padding-top 吗？就像在这个jsfiddle
Not clear on whether you want all dropped down or just label1.
不清楚你是想要全部下拉还是只是 label1。
CSS
CSS
.label1{padding-top:35px !important}
HTML
HTML
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="label1 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>
回答by Loqman
You can do this:
你可以这样做：
.form-horizontal .form-group {
transform-style: preserve-3d;
}
.form-horizontal .vertically-aligned-label {
position: relative;
top: 50%;
transform: translateY(50%);
}
回答by AngularJR
You will also need to control this if viewed on a small device, as the label will be on top of the input.
如果在小型设备上查看，您还需要对此进行控制，因为标签将位于输入的顶部。
I have added some more bootstrap to cover this for you.
我已经添加了一些更多的引导程序来为你解决这个问题。
See in this Fiddle.
请参阅此Fiddle。
<div class="container block ">
<div class="col-md-6 col-md-offset-3 col-sm-7 col-sm-offset-2 col-xs-11 col-xs-offset-0">
<form class="form-horizontal">
<div class="row block bg-info form-group">
<label for="inputEmail3" class="label1 col-sm-2 col-xs-2 control-label">Email1</label>
<div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> <!-- higher element -->
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<br>Random stuff
<br>Random stuff
<br>Random stuff
</div>
</div>
<div class="row block bg-info form-group">
<label for="inputEmail3" class="label2 col-sm-2 col-xs-2 control-label">Email2</label>
<div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>
</div>
