Html 如何将引导按钮与一行中的文本垂直对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20209281/
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
How to vertically align bootstrap buttons with text in a row?
提问by Mike Cialowicz
I'm having a problem with bootstrap rows. My buttons are not vertically aligning with my row text. Here's an example of the problem:
我在引导行方面遇到问题。我的按钮没有与我的行文本垂直对齐。下面是问题的一个例子：
<div class="col-md-2 text-right">
<button class="btn btn-lg btn-primary" type="button">A</button>
</div>
<div class="col-md-1 text-center">
<h3>or</h3>
</div>
<div class="col-md-2 text-left">
<button class="btn btn-lg btn-primary" type="button">B</button>
</div>
The text even hangs belowthe buttons if I make it any larger, like so:
如果我让它变大，文本甚至会挂在按钮下方，如下所示：
<div class="col-md-1 text-center">
<h1>OR</h1> <!-- H1 now! -->
</div>
Is there any way to get the bottom of "or" to line-up with the bottom of the button text? Or even just have the text be centered with the buttons? Thanks!
有没有办法让“或”的底部与按钮文本的底部对齐？或者甚至只是让文本以按钮为中心？谢谢！
Update:here's a JSFiddle, as requested: http://jsfiddle.net/Dk37C/1/(you'll have to stretch the right side display to see the behavior)
更新：这是一个 JSFiddle，根据要求：http: //jsfiddle.net/Dk37C/1/（你必须拉伸右侧显示才能看到行为）
采纳答案by davidpauljunior
The <h3>has a margin set on it, so if it gets bigger, the margin top will stay the same but the size of the font will increase 'downwards'.
上面<h3>设置了边距，所以如果它变大，边距顶部将保持不变，但字体的大小将“向下”增加。
You could set the styles of the <h3>to match those of the button, i.e. the padding, the line-height, the font-size, etc.
您可以设置 的样式<h3>以匹配按钮的样式，即填充、行高、字体大小等。
.text-center h3 {
padding: 11px 16px; /* Extra pixel top and bottom for border on buttons */
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
margin: 0;
}
回答by glenn garson
I found an easy way using bootstrap classes for text and a button in an MVC View, but I am pretty sure the idea will apply where ever you can use Bootstrap.
我找到了一种简单的方法，将引导类用于文本和 MVC 视图中的按钮，但我很确定这个想法将适用于任何可以使用 Bootstrap 的地方。
Just put the same header class, for example h3, in the class attributes of both the text and the button.
只需在文本和按钮的类属性中放置相同的标题类，例如 h3。
for example:
例如：
<div class="col-md-6 h3">
Mileage Reimbursed Travel
</div>
<div class="col-md-2 h3">
@Html.ActionLink("Create/Add ","Create", "EmployeeMileage")
</div>
回答by Dan
回答by Helzgate
If you are in a hurry, (i'm not saying this is the best solution but hey, it works) put the text you want to align with your button in another button, then use CSS to remove things like the background and the border and disable the button. I use this solution every once in a while and it works great.
如果您很着急，（我不是说这是最好的解决方案，但嘿，它有效）将要与按钮对齐的文本放在另一个按钮中，然后使用 CSS 删除背景和边框等内容并禁用该按钮。我每隔一段时间就会使用这个解决方案，而且效果很好。
