引导3：垂直居中按钮

我想垂直居中在一列中的一组按钮（见图）。该行的高度是动态的。我尝试了很多我发现的东西，但没有任何效果。引导3：垂直居中按钮

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

在此先感谢！

来源

2013-11-21 Max

的div不表。按钮div不会与文本缩放。 – Gant

也许你应该写更多关于你迄今为止尝试过的内容。 – Mark

试试这个：

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

Aslong的按钮停留在规模，这将让他们对准中心相同，否则就需要javascript来解决这个问题。

来源

2013-11-21 13:17:05 Razz

感谢您的解决方案！它工作正常！按钮的大小保持不变。 – Max

来得有点晚，但试图利用按钮组垂直类代替按钮组：

<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>

Here是修改后的代码

来源

2014-08-17 17:20:33 Mehdi

引导3：垂直居中按钮

回答

相关问题