Căn giữa một nút theo chiều dọc trong ô bảng, sử dụng Twitter Bootstrap

Tôi đang sử dụng Twitter Bootstrap và cố gắng căn giữa một nút trong một ô bảng. Tôi chỉ thực sự cần nó căn giữa theo chiều dọc.

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

Vui lòng xem JSFiddle của tôi để biết sự cố. Tôi đã thử một số thủ thuật căn giữa bảng mà tôi biết, nhưng dường như không có thủ thuật nào hoạt động đúng. Bất kỳ ý tưởng? Cảm ơn trước.

CẬP NHẬT: Có, tôi đã thử vertical-align:middle;và điều đó hoạt động nếu nó nội tuyến, nhưng không hiệu quả nếu nó nằm trong một lớp tdcó. Đã cập nhật JSFiddle để phản ánh điều này.

Cập nhật cuối cùng: Tôi là một tên ngốc và đã không kiểm tra xem liệu nó có bị ghi đè bởi bootstrap.css hay không

ĐỐI VỚI BOOTSTRAP 3.X:

Bootstrap hiện có kiểu sau cho các ô trong bảng:

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

Cách thực hiện là thêm lớp của riêng bạn, thêm tính cụ thể hơn cho bộ chọn trước đó:

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

Và sau đó thêm lớp vào tds của bạn :

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

ĐỐI VỚI BOOTSTRAP 2.X

Không có cách nào để làm điều này với Bootstrap.

Khi được sử dụng trong các ô của bảng, vertical-align thực hiện điều mà hầu hết mọi người mong đợi, đó là bắt chước thuộc tính valign (cũ, không dùng nữa). Trong một trình duyệt hiện đại, tuân thủ các tiêu chuẩn, ba đoạn mã sau đây thực hiện điều tương tự:

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

Kiểm tra cập nhật trò chơi của bạn

Thêm nữa

• vertical-align: middle với Bootstrap 2
• Hiểu về căn chỉnh theo chiều dọc
• Căn chỉnh theo chiều dọc của các phần tử trong một div

Ngoài ra, bạn không thể tham chiếu đến tdlớp bằng cách sử dụng .vertvì Bootstrap đã có lớp này:

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

Và đang quá tải lớp vertical-align: middletrong '.vert', vì vậy bạn phải xác định lớp này là td.vert.

Cập nhật một chút cho Bootstrap 3.

Bootstrap hiện có kiểu sau cho các ô trong bảng:

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

Cách thực hiện là thêm một lớp của riêng bạn, với cùng một bộ chọn:

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

Và sau đó thêm nó vào tds của bạn

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

thêm cái này vào css của bạn

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

sau đó thêm vào lớp vào bảng của bạn:

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

Để khắc phục điều này, tôi đưa lớp này lên trang web

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

và cái này trong TemplateField của tôi

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

vì lớp CSS trỏ trực tiếp đến phần tử td (tabledata) và có trạng thái! important ở cuối mỗi cài đặt. Nó sẽ kiểm soát cài đặt lớp CSS khởi động qua quy tắc.

Hy vọng nó giúp

Thêm vertical-align: middle;vào tdphần tử có chứa nút

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

Vậy tại sao td được đặt mặc định là vertical-align: top;? Tôi thực sự chưa biết điều đó. Tôi không dám chạm vào nó. Thay vào đó, hãy thêm cái này vào bảng định kiểu của bạn. Nó thay đổi các nút trong bảng.

table .btn{
  vertical-align: top;
}