Problème avec l'alignement du bouton radio Bootstrap

Question

J'ai une table très simple mais j'ai de la difficulté à aligner le bouton radio sur le centre. Est-ce que cela doit être fait avec CSS ou existe-t-il un moyen de le faire sur l'entrée ou 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

-alignement vertical: milieu: Alignés le point médian vertical de la boîte avec la ligne de base de la boîte-mère, plus la moitié de la hauteur x de la mère.

Le problème semble provenir du fait que les navigateurs ajoutent généralement des marges inégales aléatoires aux cases d'option et aux cases à cocher.

Utiliser un style en ligne, bizarre mais vrai:

<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 

Modifier

this short explanation par Gavin Kistner, ce qui est utile. J'ai essayé la dernière suggestion sur cette page, qui semble rendre respectable dans Chrome, IE, Firefox, Opera et Safari.

Ce que je ne faisais ajouter td{ line-height:1.5em }

Answer 2

Vous pouvez aligner le reste de la table en conséquence par exemple.

Utilisez ce CSS pour tout aligner au milieu:

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

Working Example

Ou vous pouvez aligner tout en haut en donnant votre bouton radio ce CSS:

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

Working Example

MISE À JOUR

Si vous souhaitez centrer horizontalement le bouton radio, vous pouvez le faire de cette façon:

1.) changer le code html, se débarrasser des bootstrap .radiodiv et ajoutez la classe .center à la td

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

2.) ajouter cette CSS à votre feuille de style

.center { 
    text-align: center; 
} 

Working Example