Mit Twitter Bootstrap eine Schaltfläche vertikal in der Tabellenzelle zentrieren

Ich verwende Twitter Bootstrap und versuche, eine Schaltfläche in einer Tabellenzelle zu zentrieren. Ich brauche es nur wirklich vertikal zentriert.

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

Bitte sehen Sie meine JSFiddle für das Problem. Ich habe mehrere mir bekannte Tricks zur Tischzentrierung ausprobiert, aber keiner scheint richtig zu funktionieren. Irgendwelche Ideen? Danke im Voraus.

UPDATE: Ja, ich habe es versucht vertical-align:middle;, und das funktioniert, wenn es inline ist, aber nicht, wenn es in einer Klasse isttd hat. Die JSFiddle wurde aktualisiert, um dies widerzuspiegeln.

Letztes Update: Ich bin ein Idiot und habe nicht überprüft, ob es von bootstrap.css überschrieben wurde

FÜR BOOTSTRAP 3.X:

Bootstrap hat jetzt den folgenden Stil für Tabellenzellen:

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

Der Weg besteht darin, eine eigene Klasse hinzuzufügen und dem vorherigen Selektor mehr Spezifität hinzuzufügen:

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

Und dann füge die Klasse zu deinem tds hinzu:

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

FÜR BOOTSTRAP 2.X.

Mit Bootstrap ist dies nicht möglich .

Bei Verwendung in Tabellenzellen bewirkt die vertikale Ausrichtung das, was die meisten Benutzer erwarten, nämlich das (alte, veraltete) Valign-Attribut nachzuahmen. In einem modernen, standardkonformen Browser machen die folgenden drei Codefragmente dasselbe:

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

Überprüfen Sie Ihre Geige aktualisiert

Des Weiteren

• vertikal ausrichten: Mitte mit Bootstrap 2
• Vertikales Ausrichten verstehen
• Vertikale Ausrichtung von Elementen in einem div

Sie können auch nicht mit auf die tdKlasse verweisen, .vertda Bootstrap diese Klasse bereits hat:

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

Und vertical-align: middleüberlädt die in '.vert'-Klasse, so dass Sie diese Klasse als definieren müssen td.vert.

Ein kleines Update für Bootstrap 3.

Bootstrap hat jetzt den folgenden Stil für Tabellenzellen:

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

Der Weg ist, eine eigene Klasse mit demselben Selektor hinzuzufügen:

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

Und dann füge es deinen tds hinzu

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

füge dies deinem CSS hinzu

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

Fügen Sie dann der Klasse zu Ihrer Tabelle hinzu:

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

Um dies zu beheben, habe ich diese Klasse auf die Webseite gestellt

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

und das in meinem TemplateField

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

da die CSS-Klasse direkt auf das Element td (tabledata) zeigt und am Ende jeder Einstellung die! wichtige Anweisung hat. Es wird über Bootraps CSS-Klasseneinstellungen regeln.

Ich hoffe es hilft

Fügen Sie vertical-align: middle;dem tdElement hinzu, das die Schaltfläche enthält

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

Warum ist td standardmäßig auf vertikal ausgerichtet eingestellt: oben;? Das weiß ich wirklich noch nicht. Ich würde es nicht wagen, es zu berühren. Fügen Sie dies stattdessen Ihrem Stylesheet hinzu. Es ändert die Schaltflächen in den Tabellen.

table .btn{
  vertical-align: top;
}