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

Issue with Aligning Radio Button Bootstrap

提问by SBB

I have a very simple table but I am having some trouble getting the radio button aligned center. Does this need to be done with CSS or is there a way to do it on the input or div?

我有一个非常简单的表格，但是我在使单选按钮居中对齐时遇到了一些麻烦。这是否需要用 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>

采纳答案by 4dgaurav

Demo

Demo

vertical-align: middle:Alignes the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

垂直对齐：中间：将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

The problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes.

该问题似乎是由于浏览器通常向单选按钮和复选框添加一些随机不均匀边距这一事实造成的。

Use inline style, weird but true:

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

<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

Edit

编辑

this short explanationby Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render respectably in Chrome, IE, Firefox, Opera, and Safari.

Gavin Kistner 的这个简短解释很有用。我尝试了该页面上的最终建议，它似乎在 Chrome、IE、Firefox、Opera 和 Safari 中呈现出可观的效果。

What I did was add td{ line-height:1.5em }

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

回答by Sebsemillia

You could align the rest of the table accordingly for example.

例如，您可以相应地对齐表格的其余部分。

Use this CSS to align everything in the middle:

使用此 CSS 对齐中间的所有内容：

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

Working Example

工作示例

Or you could align everything to top by giving your radio button this CSS:

或者你可以通过给你的单选按钮这个 CSS 来将所有内容对齐到顶部：

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

Working Example

工作示例

UPDATE

更新

If you want to horizontally center the radio button, you could do it this way:

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

1.) change the html, get rid of the bootstrap .radiodivand add the class .centerto the td

1.) 更改 html，去掉引导程序.radiodiv并将类添加.center到td

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

2.) add this CSS to your stylesheet

2.) 将此 CSS 添加到您的样式表

.center {
    text-align: center;
}

Working Example

工作示例