Html 如何垂直居中引导类按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22242447/
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 can I center vertically a bootstrap class button?
提问by diegoaguilar
I need to get a button inside a form-actionsvertically:
我需要在form-actions垂直方向上放置一个按钮：
This is how is displayed:
这是显示方式：
So that green button is being displayed down to its div (the blue area). How can I get to center it. I use a style.cssfile where I've styled some other divs.
这样绿色按钮就会显示到它的 div（蓝色区域）。我怎样才能让它居中。我使用了一个style.css文件，我在其中设置了一些其他 div 的样式。
回答by Narendra
Is this what you need! Here is a demo, please check and let me know if you need anything else.
这是你需要的吗！这是一个演示，如果您需要其他任何东西，请检查并告诉我。
<div style="height: 200px; border: solid 2px green; text-align:center;line-height:200px;">
<input type="submit" Value="Ok" style="vertical-align: middle"></input>
</div>
Updated code and fiddle:
更新的代码和小提琴：
We should not use inline styles, so below is the updated fiddle with separate style
我们不应该使用内联样式，所以下面是单独样式的更新小提琴
<div id="container">
<input id="verticalButton" type="submit" Value="Ok"></input>
</div>
div#container
{
height: 200px;
border: solid 2px green; text-align:center;
line-height:200px;
}
input#verticalButton
{
vertical-align: middle
}
Hope this helps!
希望这可以帮助！
回答by wernersbacher
Since I didn't want to set an absolute height, I used flex boxes.
由于我不想设置绝对高度，所以我使用了 flex 框。
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.container {
height:50%;
border: 1px solid black;
display:flex;
align-items:center; /* vertically aligned! */
justify-content: center;
}
.other {
height:320px;
border: 1px solid red;
}<div class="other"><!-- Other content -->
Welcome to my great site!
<div class="container"> <!-- the container you want that button -->
<button class="btn btn-danger btn-lg">
Hello World
</button>
</div>
</div>回答by JayDeep Nimavat
use some style like
使用一些风格像
display:table-cell; //main div
vertical-align:center; // to button
If this will not worked than try
如果这不起作用，请尝试
height:100%; // to button
vertical-align:center; // to button
line-height : 100%; // to button
