對齊單選按鈕引導問題

Question

我有一個非常簡單的表，但我有一些麻煩讓單選按鈕對齊中心。這是否需要用CSS來完成，還是有辦法在輸入或div上做到這一點？

<div class="row"> 
<div class="col-md-12"> 
    <div class="panel panel-info"> 
    <div class="panel-heading"><strong>Standard Table</strong></div> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Estimated Graduation Date</th> 
       <th>College</th> 
       <th>Degree</th> 
       <th>Status</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
       <div class="radio" align="center"> 
        <label> 
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked style=""> 
        </label> 
       </div> 
       </td> 
       <td>04/24/2014</td> 
       <td>Chandler Gilbert Community College</td> 
       <td>Bachelors of Science</td> 
       <td>In Progress</td> 
       <td> 
       <!-- Single button --> 
       <div class="btn-group"> 
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        Action <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <div class="radio"> 
        <label> 
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
        </label> 
       </div> 
       </td> 
       <td>04/24/2014</td> 
       <td>Chandler Gilbert Community College</td> 
       <td>Bachelors of Science</td> 
       <td>In Progress</td> 
       <td> 
       <!-- Single button --> 
       <div class="btn-group"> 
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        Action <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
    </div> 
</div> 

Answer 1

Demo

垂直對齊：中： Alignes框的垂直中點與父框的基線，加上父的x高度的一半。

這個問題似乎由事實瀏覽器引起的常見的一些隨機的不均勻添加邊距單選按鈕和複選框。

使用內嵌式的，很奇怪，但真正：

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label 
    <br/> 
    <br/> 
    <input type="radio" style="vertical-align: middle; margin: 0px;"> Label 
     <br/> 
     <br/> 
     <input type="radio" style="vertical-align: middle; margin: 0px;"> Label 

編輯

this short explanation由加文·基斯特納，這是非常有用的。我在該頁面上嘗試了最終的建議，這似乎在Chrome，IE，Firefox，Opera和Safari中得到了很好的渲染。

我所做的是添加td{ line-height:1.5em }

Answer 2

例如，您可以相應地調整表格的其餘部分。

使用此CSS對齊，中間的一切：

.table>tbody>tr>th, 
.table>tbody>tr>td { 
    vertical-align: middle; 
} 

Working Example

或者，您可以通過給你的單選按鈕，這個CSS對準一切頂：

.table .radio { 
    margin-top: 0; 
} 

Working Example

UPDATE

如果你想水平居中的單選按鈕，你可以這樣來做：

1）改變HTML，擺脫了自舉.radiodiv和類.center添加到td

<td class="center">      
    <label> 
     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> 
    </label>      
</td> 

2）這個CSS添加到您的樣式表

.center { 
    text-align: center; 
} 

Working Example