จัดปุ่มตรงกลางในแนวตั้งในเซลล์ตารางโดยใช้ Twitter Bootstrap

ฉันใช้ Twitter Bootstrap และพยายามจัดปุ่มให้อยู่กึ่งกลางภายในเซลล์ตาราง ฉันต้องการให้มันอยู่ตรงกลางในแนวตั้งเท่านั้น

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

โปรดดูJSFiddleของฉันสำหรับปัญหา ฉันได้ลองใช้เทคนิคการจัดโต๊ะตรงกลางหลายอย่างที่ฉันรู้ แต่ดูเหมือนจะไม่มีอะไรทำงานได้อย่างถูกต้อง ความคิดใด ๆ ? ขอบคุณล่วงหน้า.

UPDATE:ใช่ฉันได้พยายามvertical-align:middle;และผลงานว่าถ้ามันเป็นแบบอินไลน์ แต่ไม่ได้ถ้ามันอยู่ในระดับที่tdมี อัปเดต JSFiddle เพื่อแสดงสิ่งนี้

การอัปเดตครั้งสุดท้าย:ฉันเป็นคนงี่เง่าและไม่ได้ตรวจสอบว่ามีการเขียนทับโดย bootstrap.css หรือไม่

สำหรับ BOOTSTRAP 3.X:

Bootstrap มีสไตล์ต่อไปนี้สำหรับเซลล์ตาราง:

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

วิธีไปคือเพิ่มคลาสของคุณเองโดยเพิ่มความเฉพาะเจาะจงมากขึ้นให้กับตัวเลือกก่อนหน้า:

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

จากนั้นเพิ่มคลาสในtds ของคุณ:

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

สำหรับ BOOTSTRAP 2.X

มีวิธีการทำเช่นนี้กับเงินทุน

เมื่อใช้ในเซลล์ตารางแนวตั้งจะทำสิ่งที่คนส่วนใหญ่คาดหวังซึ่งก็คือการเลียนแบบแอตทริบิวต์ valign (เก่าเลิกใช้แล้ว) ในเบราว์เซอร์ที่ทันสมัยและเป็นไปตามมาตรฐานข้อมูลโค้ดสามรายการต่อไปนี้ทำสิ่งเดียวกัน:

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

ตรวจสอบการปรับปรุงซอของคุณ

เพิ่มเติม

• แนวตั้ง: ตรงกลางด้วย Bootstrap 2
• ทำความเข้าใจแนวตั้ง
• การจัดตำแหน่งองค์ประกอบในแนวตั้งใน div

นอกจากนี้คุณไม่สามารถอ้างถึงtdคลาสโดยใช้.vertเนื่องจาก Bootstrap มีคลาสนี้อยู่แล้ว:

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

และกำลังโอเวอร์โหลดvertical-align: middleคลาสใน '.vert' ดังนั้นคุณต้องกำหนดคลาสนี้เป็นtd.vert.

การอัปเดตเล็กน้อยสำหรับ Bootstrap 3

Bootstrap มีสไตล์ต่อไปนี้สำหรับเซลล์ตาราง:

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

วิธีไปคือเพิ่มชั้นเรียนของคุณเองโดยใช้ตัวเลือกเดียวกัน:

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

แล้วเพิ่มลงใน tds ของคุณ

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

เพิ่มสิ่งนี้ใน css ของคุณ

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

จากนั้นเพิ่มในชั้นเรียนลงในตารางของคุณ:

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

เพื่อแก้ไขปัญหานี้ฉันวางชั้นเรียนนี้ไว้ในหน้าเว็บ

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

และสิ่งนี้ใน TemplateField ของฉัน

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

เนื่องจากคลาส CSS ชี้ไปที่องค์ประกอบ td (tabledata) โดยตรงและมี! important statment ในตอนท้ายของการตั้งค่าแต่ละรายการ มันจะอยู่เหนือการตั้งค่าคลาส CSS ของ bootraps

หวังว่าจะช่วยได้

เพิ่มvertical-align: middle;ลงในtdองค์ประกอบที่มีปุ่ม

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

เหตุใดค่าเริ่มต้น td จึงตั้งเป็นแนวตั้ง: ด้านบน;? ฉันยังไม่รู้จริงๆ ฉันคงไม่กล้าแตะต้องมัน เพิ่มสิ่งนี้ลงในสไตล์ชีตของคุณแทน มันเปลี่ยนปุ่มในตาราง

table .btn{
  vertical-align: top;
}