CSS Twitter Bootstrap - 将输入与控制组内的标签垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17845864/
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
Twitter Bootstrap - Vertically align input with label inside control-group
提问by Hard-Boiled Wonderland
<div class="control-group">
<label class="control-label ">Date of purchase as detailed on your receipt</label>
<div class="controls">
<div class="input-append">
<select name="invoice_date" value="2013-06-28" required="required">
<option value="">Please Select</option>
</select>
<button type="button" class="btn info btn-primary" data-help="invoice_date">i</button>
</div>
</div>
</div>
I tried a few solutions and one kind of worked using position absolute, but this affected other areas of bootstrap in particular when it gets responsive.
我尝试了一些解决方案，其中一种使用绝对位置，但这会影响引导程序的其他区域，特别是当它响应时。
I am trying to get the input to line up with the center of the label that has been pushed over multiple lines but in the best practice of bootstrap.
我试图让输入与已推到多行但在引导程序的最佳实践中的标签中心对齐。
Or should I simply give up and force it to display a full width label with the input underneath?
或者我应该简单地放弃并强制它显示一个带有输入下方的全宽标签？
Any insight would be great, thanks!
任何见解都会很棒，谢谢！
回答by koala_dev
How about overriding Bootstrap's styles and using display:inline-block;instead of floats for the positioning, then you can use vertical-alignto center the label:
如何覆盖 Bootstrap 的样式并使用display:inline-block;而不是浮动来定位，然后您可以使用vertical-align将标签居中：
.form-horizontal .control-label {
display: inline-block;
vertical-align: middle;
float: none;
}
.form-horizontal .controls {
display: inline-block;
margin-left: 20px;
}
回答by South Coast Web
Add a class to the input-append then apply a margin to that.
向 input-append 添加一个类，然后对其应用边距。
<div class="input-append spacedTop">
Then add the CSS
然后添加CSS
.spacedTop { margin-top:10px; }
If you don't do an extra class it will margin any other input-appends you use throughout your site.
如果您不做额外的课程，它将为您在整个站点中使用的任何其他输入附加提供边距。
