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

Question

J'utilise Twitter Bootstrap et j'essaie de centrer un bouton dans une cellule de tableau. J'ai seulement besoin de le centrer 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. Avez-vous des idées ? Merci d'avance.

UPDATE : Oui, j'ai essayé vertical-align:middle; et cela fonctionne s'il est en ligne, mais pas s'il est dans une classe que l'on appelle le td a. J'ai mis à jour le JSFiddle pour refléter cela.

Mise à jour finale : Je suis un idiot, et je n'ai pas vérifié s'il n'était pas écrasé par bootstrap.css.

Answer 1

POUR BOOTSTRAP 3.X :

Bootstrap dispose désormais du 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 ensuite, ajoutez la classe à votre td s :

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

POUR BOOTSTRAP 2.X

Il y a aucun moyen de le faire avec Bootstrap.

Lorsqu'il est utilisé dans des cellules de tableau, alignement vertical fait ce que la plupart des gens attendent d'elle, à savoir imiter l'attribut valign (ancien, déprécié). 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 d'informations sur

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

De même, vous ne pouvez pas faire référence à la td classe en utilisant .vert car Bootstrap possède 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 le vertical-align: middle dans la classe '.vert', vous devez donc définir cette classe comme suit td.vert .

Answer 2

Une petite mise à jour pour Bootstrap 3.

Bootstrap dispose désormais du style suivant pour les cellules de tableau :

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

La solution consiste à ajouter une classe propre, avec le même sélecteur :

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

Et ensuite l'ajouter à vos tds

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

Answer 3

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">

Answer 4

Pour corriger cela, 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 comporte la mention !important à la fin de chaque paramètre. Elle prévaudra sur les paramètres de la classe CSS de bootsraps.

J'espère que cela vous aidera

Answer 5

Ajouter vertical-align: middle; a la td 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>