Centralizar um botão verticalmente na célula da tabela, usando o Twitter Bootstrap

Estou usando o Twitter Bootstrap e tentando centralizar um botão em uma célula da tabela. Eu só preciso centralizá-lo 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>

Por favor, consulte meu JSFiddle para o problema. Eu tentei vários truques de centralização de mesa que conheço, mas nenhum parece funcionar corretamente. Alguma ideia? Desde já, obrigado.

ATUALIZAÇÃO: Sim, eu tentei vertical-align:middle;, e funciona se for embutido, mas não se estiver em uma classe que tdjá tenha. Atualizado o JSFiddle para refletir isso.

Atualização final: sou um idiota e não verifiquei se estava sendo substituído por bootstrap.css

PARA BOOTSTRAP 3.X:

O bootstrap agora tem o seguinte estilo para células de tabela:

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

O caminho a seguir é adicionar sua própria classe, adicionando mais especificidade ao seletor anterior:

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

Em seguida, adicione a classe ao seu tds:

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

PARA BOOTSTRAP 2.X

Não há como fazer isso com o Bootstrap.

Quando usado em células de tabela, o alinhamento vertical faz o que a maioria das pessoas espera, que é imitar o atributo valign (antigo, obsoleto). Em um navegador moderno e compatível com os padrões, os três snippets de código a seguir fazem a mesma coisa:

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

Verifique seu violino atualizado

Mais distante

• alinhamento vertical: meio com Bootstrap 2
• Compreendendo o alinhamento vertical
• Alinhamento vertical de elementos em um div

Além disso, você não pode se referir à tdclasse usando .vertporque o Bootstrap já tem esta classe:

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

E está sobrecarregando a vertical-align: middleclasse in '.vert', então você deve definir essa classe como td.vert.

Uma pequena atualização para o Bootstrap 3.

O bootstrap agora tem o seguinte estilo para células de tabela:

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

O jeito de fazer isso é adicionar uma classe sua, com o mesmo seletor:

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

E então adicione-o aos seus tds

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

adicione isso ao seu css

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

em seguida, adicione à classe à sua mesa:

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

Para corrigir isso, coloquei essa aula na página da web

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

e isso no meu TemplateField

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

pois a classe CSS aponta diretamente para o elemento td (tabledata) e tem a instrução! important no final de cada configuração. Irá sobrepor as configurações de classes CSS das regras de inicialização.

Espero que ajude

Adicione vertical-align: middle;ao tdelemento que contém o botão

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

Então, por que o padrão td está definido como alinhamento vertical: top ;? Eu realmente não sei disso ainda. Eu não ousaria tocá-lo. Em vez disso, adicione isso à sua folha de estilo. Altera os botões nas tabelas.

table .btn{
  vertical-align: top;
}