Centrare un pulsante verticalmente nella cella della tabella, utilizzando Twitter Bootstrap

Sto usando Twitter Bootstrap e sto tentando di centrare un pulsante all'interno di una cella di tabella. Ne ho davvero bisogno solo centrato verticalmente.

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

Si prega di consultare il mio JSFiddle per il problema. Ho provato diversi trucchi per centrare il tavolo che conosco, ma nessuno sembra funzionare correttamente. Qualche idea? Grazie in anticipo.

AGGIORNAMENTO: Sì, ho provato vertical-align:middle;, e funziona se è in linea, ma non se è in una classe che tdha. Aggiornato il JSFiddle per riflettere questo.

Aggiornamento finale: sono un idiota e non ho controllato se fosse stato sovrascritto da bootstrap.css

PER BOOTSTRAP 3.X:

Bootstrap ora ha il seguente stile per le celle della tabella:

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

La strada da percorrere è aggiungere la tua classe, aggiungendo più specificità al selettore precedente:

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

E poi aggiungi la classe alla tua tds:

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

PER BOOTSTRAP 2.X

Non c'è modo di farlo con Bootstrap.

Quando viene utilizzato nelle celle di una tabella, l'allineamento verticale fa ciò che la maggior parte delle persone si aspetta, ovvero imitare l'attributo valign (vecchio, deprecato). In un browser moderno e conforme agli standard, i seguenti tre frammenti di codice fanno la stessa cosa:

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

Controlla il tuo violino aggiornato

Ulteriore

• allineamento verticale: al centro con Bootstrap 2
• Capire l'allineamento verticale
• Allineamento verticale degli elementi in un div

Inoltre, non puoi fare riferimento alla tdclasse usando .vertperché Bootstrap ha già questa classe:

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

E sta sovraccaricando la vertical-align: middleclasse ".vert", quindi devi definire questa classe come td.vert.

Un piccolo aggiornamento per Bootstrap 3.

Bootstrap ora ha il seguente stile per le celle della tabella:

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

Il modo migliore è aggiungere una tua classe, con lo stesso selettore:

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

E poi aggiungilo al tuo tds

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

aggiungilo al tuo css

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

quindi aggiungi alla classe al tuo tavolo:

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

Per risolvere questo problema, ho inserito questa classe nella pagina web

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

e questo nel mio TemplateField

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

poiché la classe CSS punta direttamente all'elemento td (tabledata) e ha la dichiarazione! important alla fine di ogni impostazione. Sovraccaricherà le impostazioni della classe CSS.

Spero che sia d'aiuto

Aggiungere vertical-align: middle;al tdelemento che contiene il pulsante

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

Allora perché td è impostato di default su vertical-align: top ;? Davvero non lo so ancora. Non oserei toccarlo. Aggiungilo invece al tuo foglio di stile. Altera i pulsanti nelle tabelle.

table .btn{
  vertical-align: top;
}