Issue with Aligning Radio Button Bootstrap

Question

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?

<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: Alignes the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

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 explanation by 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.

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

Answer 2

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

Use this CSS to align everything in the middle:

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

.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 .radio div and add the class .center to the td

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

2.) add this CSS to your stylesheet

.center {
    text-align: center;
}

Working Example