trung văn bản trong một bảng trong Twitter Bootstrap

Question

tôi có mã này:

<table class="table"> 
     <thead> 
      <tr> 
       <th>1</th> 
       <th>1</th> 
       <th>1</th> 
       <th>1</th> 
       <th>2</th> 
       <th>2</th> 
       <th>2</th> 
       <th>2</th> 
       <th>3</th> 
       <th>3</th> 
       <th>3</th> 
       <th>3</th> 
       <th>4</th> 
       <th>4</th> 
       <th>4</th> 
       <th>4</th> 
       <th>5</th> 
       <th>5</th> 
       <th>5</th> 
       <th>5</th> 
       <th>6</th> 
       <th>6</th> 
       <th>6</th> 
       <th>6</th> 
       <th>7</th> 
       <th>7</th> 
       <th>7</th> 
       <th>7</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="4">Lorem</td> 
       <td colspan="4">ipsum</td> 
       <td colspan="4">dolor</td> 
       <td colspan="4">sit</td> 
       <td colspan="4">amet</td> 
       <td colspan="4">Lorem</td> 
       <td colspan="4">ipsum</td> 
      </tr> 
     </tbody> 
    </table>​ 



@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

    table, 
    thead, 
    tr, 
    tbody, 
    th, 
    td { 
     text-align: center; 
    } 

Fiddle

Đối với một số lý do, Văn bản bên trong bảng vẫn không làm trung tâm. Tại sao? Làm cách nào để căn giữa văn bản bên trong bảng?

Để làm cho nó thực sự rõ ràng: Ví dụ, tôi muốn "Lorem" để ngồi ở giữa bốn "1".

Answer 1

.table td 's văn bản class được thiết lập sang trái, chứ không phải là trung tâm:

Thêm này nên tập trung nó:

.table td { 
    text-align: center; 
} 

fiddle Cập nhật: http://jsfiddle.net/JeCpZ/1/

Answer 2

<td class="text-center"> 

và sửa chữa .text-center trong bootstrap.css:

.text-center { 
    text-align: center !important; 
} 

Answer 3

Bạn có thể làm cho class td của mà không thay đổi css bằng cách thêm một div với một lớp học của "text-trung tâm" bên trong tế bào:

<td> 
     <div class="text-center"> 
      My centered text 
     </div> 
    </td> 

Answer 4

Một trong những tính năng chính của Bootstrap là nó làm giảm bớt việc sử dụng của thẻ quan trọng! Sử dụng câu trả lời ở trên sẽ đánh bại mục đích. Bạn có thể dễ dàng tùy chỉnh bootstrap bằng cách sửa đổi các lớp trong tệp css của riêng bạn và liên kết nó sau khi bao gồm css boostrap.

Answer 5

add:

<p class="text-center"> Your text here... </p> 

Answer 6

Trong Bootstrap 3 (3.0.3) thêm lớp "text-center" đến một yếu tố td làm việc ra khỏi hộp.

Ie, các trung tâm sau some text trong một ô trong bảng:

<td class="text-center">some text</td> 

Answer 7

tôi đã cùng một vấn đề và là một cách tốt hơn để giải quyết nó mà không sử dụng quan trọng được xác định như sau trong css của tôi:

table th.text-center, table td.text-center { 
    text-align: center; 
} 

Bằng cách đó, đặc tính của lớp trung tâm văn bản hoạt động chính xác trong các bảng

Answer 8

Id chỉ một lần, bạn không nên thay đổi biểu định kiểu của mình. Chỉ cần chỉnh sửa mà td đặc biệt

<td style="text-align: center;"> 

Cheers

Answer 9

Tôi nghĩ rằng người kết hợp tốt nhất cho html & Css cho mod nhanh chóng và sạch là:

<table class="table text-center"> 
<thead> 
     <tr>      
     <th class="text-center">Uno</th> 
     <th class="text-center">Due</th> 
     <th class="text-center">Tre</th> 
     <th class="text-center">Quattro</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</tbody> 
</table> 

đóng thẻ <table> init sau đó sao chép ở đâu bạn muốn :) Tôi hy vọng nó có thể hữu ích Chúc một ngày tốt lành w stackoverflow

p.s. Bootstrap v3.2.0

Answer 10

chỉ cung cấp cho các xung quanh <tr> một lớp tùy chỉnh như:

<tr class="custom_centered"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 

và có css chỉ chọn <td> s mà là bên trong một <tr> với lớp tùy chỉnh của bạn.

tr.custom_centered td { 
    text-align: center; 
} 

như thế này bạn không có nguy cơ ghi đè lên các bảng khác hoặc thậm chí ghi đè lên lớp cơ sở khởi động (như một số người tiền nhiệm đã đề xuất).