The problem with building a startup button

Question

I have a very simple table, but I have some problems aligning the center of the radio book. Does it need to be done with CSS or is there a way to do this in an 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

vertical alignment: medium: Aligns the vertical middle of the field with the base of the source field plus half the x-height of the parent element.

The problem seems to be caused by the fact that browsers usually add some random uneven fields to radio buttons and checkboxes.

Using inline style is 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

Gavin Kistner, . , , , Chrome, IE, Firefox, Opera Safari.

, , td{ line-height:1.5em }

Answer 2

.

CSS, :

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

, CSS:

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

UPDATE

, :

1.) html, bootstrap .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;
}