Bootstrap 3：垂直居中按钮

Question

我想要在一列中垂直居中一组按钮（参见图片）。行的高度是动态的。我尝试了很多方法，但都没有成功。

截图：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>

这是我的完整代码：http://bootply.com/95760 有人有什么想法吗？

我正在使用Bootstrap 3。

提前感谢！

- Max

---

Div不是表格。按钮div与文本div不成比例。 - Aurelia

也许你应该多写一些关于你已经尝试过的内容。 - Mark

Answer 1

试试这个：

.question{
    position: relative;
}
.r-answer{
    position: static;
}
.r-answer .btn-group{
    position: absolute;
    top: 50%;
    margin-top: -17px;
}

只要按钮的大小保持不变，这将使它们居中对齐，否则您需要使用JavaScript来解决它。

- Razz

---

谢谢您提供的解决方案！它很好用！按钮的大小保持不变。 - Max

Answer 2

有点晚了，但是尝试使用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>

这里是修改后的代码

- Mehdi