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

vertical-align：middle： 使用父框的基线加上父框的x高度的一半来对框的垂直中点进行Alignes。

问题似乎是因为浏览器通常会在单选按钮和复选框中添加一些随机不均匀的边距。

使用内联样式，奇怪但真实：

<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

修改
Gavin Kistner的
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

<强>更新

如果你想水平居中单选按钮，你可以这样做：

1。）更改html，删除引导程序.radio div并将类.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

对齐单选按钮引导程序的问题

2 个答案: