html - 对齐单选按钮 Bootstrap 的问题

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

垂直对齐:中间: 将框的垂直中点与父框的基线加上父框 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由 Gavin Kistner 撰写，这很有用。我尝试了该页面上的最终建议，它似乎在 Chrome、IE、Firefox、Opera 和 Safari 中呈现得很好。

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