Centrer un bouton verticalement dans une cellule de tableau, à l'aide de Twitter Bootstrap

J'utilise Twitter Bootstrap et j'essaie de centrer un bouton dans une cellule de tableau. Je n'en ai vraiment besoin que centré verticalement.

<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

Veuillez consulter mon JSFiddle pour le problème. J'ai essayé plusieurs astuces de centrage de table que je connais, mais aucune ne semble fonctionner correctement. Des idées? Merci d'avance.

MISE À JOUR: Oui, j'ai essayé vertical-align:middle;, et cela fonctionne si c'est en ligne, mais pas si c'est dans une classe qui tda. Mise à jour de JSFiddle pour refléter cela.

Dernière mise à jour: je suis un idiot et je n'ai pas vérifié s'il était écrasé par bootstrap.css

POUR BOOTSTRAP 3.X:

Bootstrap a maintenant le style suivant pour les cellules de tableau:

.table tbody > tr > td{
    vertical-align: top;
}

La solution consiste à ajouter votre propre classe, en ajoutant plus de spécificité au sélecteur précédent:

.table tbody > tr > td.vert-aligned {
    vertical-align: middle;
}

Et puis ajoutez la classe à vos tds:

<tr>
    <td class="vert-aligned"></td>
    ...
</tr>

POUR BOOTSTRAP 2.X

Il n'y a aucun moyen de faire cela avec Bootstrap.

Lorsqu'il est utilisé dans les cellules d'un tableau, vertical-align fait ce que la plupart des gens attendent, c'est-à-dire imiter l'attribut valign (ancien, obsolète). Dans un navigateur moderne et conforme aux normes, les trois extraits de code suivants font la même chose:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

Vérifiez votre violon mis à jour

Plus loin

• vertical-align: milieu avec Bootstrap 2
• Comprendre l'alignement vertical
• Alignement vertical des éléments dans un div

De plus, vous ne pouvez pas faire référence à la tdclasse en utilisant .vertcar Bootstrap a déjà cette classe:

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

Et surcharge la vertical-align: middleclasse in '.vert', vous devez donc définir cette classe comme td.vert.

Une petite mise à jour pour Bootstrap 3.

Bootstrap a maintenant le style suivant pour les cellules de tableau:

.table tbody>tr>td
{
    vertical-align: top;
}

La voie à suivre est d'ajouter votre propre classe, avec le même sélecteur:

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

Et puis ajoutez-le à votre tds

<td class="vert-align"></td>

ajoutez ceci à votre css

.table-vcenter td {
   vertical-align: middle!important;
}

puis ajoutez à la classe à votre table:

        <table class="table table-hover table-striped table-vcenter">

Pour résoudre ce problème, j'ai mis cette classe sur la page Web

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

et ceci dans mon TemplateField

<asp:TemplateField ItemStyle-CssClass="vcenter">

car la classe CSS pointe directement vers l'élément td (tabledata) et a la déclaration! importante à la fin de chaque paramètre. Il dépassera les paramètres de classe CSS.

J'espère que ça aide

Ajouter vertical-align: middle;à l' tdélément qui contient le bouton

<td style="vertical-align:middle;">  <--add this to center vertically
  <a href="#" class="btn btn-primary">
    <i class="icon-check icon-white"></i>
  </a>
</td>

Alors, pourquoi td est-il défini par défaut sur vertical-align: top ;? Je ne sais vraiment pas encore. Je n'oserais pas y toucher. Ajoutez plutôt ceci à votre feuille de style. Cela modifie les boutons dans les tableaux.

table .btn{
  vertical-align: top;
}