Căn giữa văn bản trong bảng trong Twitter Bootstrap

Vì một số lý do, Văn bản bên trong bảng vẫn không được căn giữa. 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" nằm ở giữa bốn "1". Các bác sĩ cho biết thêm:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

<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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFiddle

Các .table td's text-align được thiết lập sang trái, chứ không phải là trung tâm.

Thêm điều này sẽ căn giữa tất cả các tds của bạn :

.table td {
   text-align: center;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

<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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFIDDLE được cập nhật

Trong Bootstrap 3 (3.0.3), việc thêm "text-center"lớp vào một tdphần tử sẽ hoạt động hiệu quả.

Tức là các tâm sau some texttrong một ô bảng:

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

Tôi nghĩ ai là người kết hợp tốt nhất cho html & Css để mod nhanh và gọn gàng 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 <table>thẻ init rồi sao chép vào nơi 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 với stackoverflow

ps Bootstrap v3.2.0

Bạn có thể căn chỉnh td mà không thay đổi css bằng cách thêm div với một lớp "text-center" bên trong ô:

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

<td class="text-center">

và sửa lỗi .text-center trong bootstrap.css:

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

Tôi đã gặp vấn đề tương tự và cách tốt hơn để giải quyết nó mà không cần sử dụng !importantlà xác định những điều sau trong CSS của tôi:

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

Bằng cách đó, tính đặc hiệu của text-centerlớp hoạt động chính xác trong các bảng.

Nếu đó chỉ là 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 cụ thể đó td:

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

Chúc mừng

Một trong những tính năng chính của Bootstrap là nó giảm bớt việc sử dụng thẻ! Important. 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.

thêm vào:

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

chỉ cần cung cấp cho 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ó các lựa chọn chỉ css <td>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 đè các bảng khác hoặc thậm chí ghi đè một lớp cơ sở bootstrap (như một số người tiền nhiệm của tôi đã đề xuất).