Memusatkan teks dalam tabel di Twitter Bootstrap

Untuk beberapa alasan, teks di dalam tabel masih tidak berada di tengah. Mengapa? Bagaimana cara memusatkan teks di dalam tabel?

Untuk membuatnya sangat jelas: Misalnya, saya ingin "Lorem" duduk di tengah empat "1". </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

@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

The .table td's text-align diatur ke kiri, bukan pusat.

Menambahkan ini harus memusatkan semua tds Anda :

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

Dalam Bootstrap 3 (3.0.3) menambahkan "text-center"kelas ke tdelemen berhasil di luar kotak.

Yaitu, pusat-pusat berikut some textdalam sel tabel:

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

Saya pikir siapa campuran terbaik untuk html & Css untuk mod cepat dan bersih adalah:

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

tutup <table>tag init lalu salin di tempat yang Anda inginkan :) Semoga bermanfaat. Semoga hari Anda menyenangkan dengan stackoverflow

ps Bootstrap v3.2.0

Anda dapat membuat perataan td tanpa mengubah css dengan menambahkan div dengan kelas "text-center" di dalam sel:

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

<td class="text-center">

dan perbaiki .text-center di bootstrap.css:

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

Saya memiliki masalah yang sama dan cara yang lebih baik untuk menyelesaikannya tanpa menggunakan !importantadalah dengan mendefinisikan yang berikut ini di CSS saya:

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

Dengan begitu, spesifikasi text-centerkelas berfungsi dengan benar dalam tabel.

Jika hanya sekali, Anda sebaiknya tidak mengubah style sheet Anda. Cukup edit yang itu td:

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

Bersulang

Salah satu fitur utama Bootstrap adalah mengurangi penggunaan tag penting! Menggunakan jawaban di atas akan menggagalkan tujuan. Anda dapat dengan mudah menyesuaikan bootstrap dengan memodifikasi kelas dalam file css Anda sendiri dan menautkannya setelah memasukkan boostrap css.

Menambahkan:

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

berikan <tr>kelas khusus di sekitarnya seperti:

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

dan css hanya memilih <td>s yang ada di dalam <tr>dengan kelas kustom Anda.

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

seperti ini Anda tidak mengambil risiko untuk menimpa tabel lain atau bahkan menimpa kelas dasar bootstrap (seperti yang disarankan beberapa pendahulu saya).