twitter-bootstrap Bootstrap 3：垂直居中的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20121628/
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 3: vertically centered buttons
提问by Max
I want to vertically center a group of buttonsin a column (see image). The height of the row is dynamic. I've tried a lot of things that I found, but nothing works.
我想将一组按钮垂直居中放在一列中（见图）。行的高度是动态的。我已经尝试了很多我发现的东西，但没有任何效果。
Screenshot: https://www.dropbox.com/s/ztogupb46o1rfym/bootstrap.PNG
截图：https: //www.dropbox.com/s/ztogupb46o1rfym/bootstrap.PNG
<div class="row question even">
<div class="col-sm-7 col-md-9 text r-text">
<div>
dynamic content
</div>
</div>
<div class="col-sm-5 col-md-3 r-answer" id="radio">
<input class="answerradio" id="question3" name="question3" type="hidden" value="4">
<div class="btn-group" data-target="question3" data-toggle="buttons-radio">
<button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
</div>
</div>
</div>
Here is the my entire code: http://bootply.com/95760
这是我的整个代码：http: //bootply.com/95760
Have some one an idea?
有人有什么想法吗？
I'm using Bootstrap 3.
我正在使用 Bootstrap 3。
Thanks in advance!
提前致谢！
采纳答案by Razz
Try this:
试试这个：
.question{
position: relative;
}
.r-answer{
position: static;
}
.r-answer .btn-group{
position: absolute;
top: 50%;
margin-top: -17px;
}
Aslong as the buttons stays the same in size this will get them to align center, otherwise you will need javascript to fix it.
只要按钮的大小保持不变，这将使它们居中对齐，否则您将需要 javascript 来修复它。
回答by Mehdi
A little bit late but try using the button-group-vertical class instead of button-group:
有点晚了，但请尝试使用 button-group-vertical 类而不是 button-group：
<div class="btn-group-vertical" data-target="question3" data-toggle="buttons-radio">
<button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
</div>
Hereis the modified code
这是修改后的代码
