Centrar un botón verticalmente en la celda de la tabla, usando Twitter Bootstrap

Estoy usando Twitter Bootstrap e intento centrar un botón dentro de una celda de la tabla. Realmente solo lo necesito centrado 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>

Consulte mi JSFiddle para conocer el problema. He probado varios trucos para centrar la mesa que conozco, pero ninguno parece funcionar correctamente. ¿Algunas ideas? Gracias por adelantado.

ACTUALIZACIÓN: Sí, lo he intentado vertical-align:middle;y funciona si está en línea, pero no si está en una clase que tdtiene. Se actualizó JSFiddle para reflejar esto.

Actualización final: soy un idiota y no verifiqué si estaba siendo sobrescrito por bootstrap.css

PARA BOOTSTRAP 3.X:

Bootstrap ahora tiene el siguiente estilo para las celdas de la tabla:

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

El camino a seguir es agregar su propia clase, agregando más especificidad al selector anterior:

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

Y luego agrega la clase a tu tds:

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

PARA BOOTSTRAP 2.X

No hay forma de hacer esto con Bootstrap.

Cuando se usa en las celdas de la tabla, la alineación vertical hace lo que la mayoría de la gente espera, que es imitar el atributo valign (antiguo, obsoleto). En un navegador moderno que cumple con los estándares, los siguientes tres fragmentos de código hacen lo mismo:

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

Revisar su violín actualizado

Más lejos

• vertical-align: middle con Bootstrap 2
• Entendiendo la alineación vertical
• Alineación vertical de elementos en un div

Además, no puede hacer referencia a la tdclase que usa .vertporque Bootstrap ya tiene esta clase:

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

Y está sobrecargando la vertical-align: middleclase in '.vert', por lo que debe definir esta clase como td.vert.

Una pequeña actualización para Bootstrap 3.

Bootstrap ahora tiene el siguiente estilo para las celdas de la tabla:

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

El camino a seguir es agregar su propia clase, con el mismo selector:

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

Y luego agrégalo a tu tds

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

agregue esto a su css

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

luego agregue a la clase a su mesa:

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

Para solucionar esto, puse esta clase en la página web

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

y esto en mi TemplateField

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

ya que la clase CSS apunta directamente al elemento td (tabledata) y tiene la instrucción! important al final de cada configuración. Sobrepasará la configuración de clases CSS de bootsraps.

Espero eso ayude

Agregar vertical-align: middle;al tdelemento que contiene el botón

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

Entonces, ¿por qué td está configurado por defecto en vertical-align: top ;? Realmente no lo sé todavía. No me atrevería a tocarlo. En su lugar, agregue esto a su hoja de estilo. Altera los botones de las tablas.

table .btn{
  vertical-align: top;
}