Twitter Bootstrap'te bir tablodaki metni ortalamak

Bazı nedenlerden dolayı, tablonun içindeki metin hala ortalanmamış. Neden? Metni tablonun içinde nasıl ortalayabilirim?

Gerçekten Netleştirmek için: Örneğin, "Lorem" in dört "1" in ortasında oturmasını istiyorum.

@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

.table tdYerine merkezi, sola 'ın text-align ayarlanır.

Bunu eklemek tüm tde-postalarınızı ortalamalıdır:

.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 güncellendi

Bootstrap 3'te (3.0.3) "text-center"sınıfı bir tdelemana eklemek kutudan çıkar.

Yani, some textbir tablo hücresinde aşağıdaki merkezler :

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

Hızlı ve temiz mod için html ve Css için en iyi karışımın kim olduğunu düşünüyorum:

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

<table>init etiketini kapatın ve istediğiniz yere kopyalayın :) Umarım yararlı olur İyi günler w stackoverflow

ps Bootstrap v3.2.0

Hücrenin içine "text-center" sınıfına sahip bir div ekleyerek css'yi değiştirmeden td'leri hizalayabilirsiniz:

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

<td class="text-center">

ve bootstrap.css'deki .text-center'ı düzeltin:

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

Aynı sorunu yaşadım ve kullanmadan çözmenin daha iyi bir yolu !important, CSS'mde aşağıdakileri tanımlamaktı:

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

Bu şekilde text-centersınıfın özgüllüğü tablolarda doğru çalışır.

Sadece bir kez ise, stil sayfanızı değiştirmemelisiniz. Sadece bunu düzenleyin td:

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

Şerefe

Bootstrap'in temel özelliklerinden biri, önemli etiketinin kullanımını kolaylaştırmasıdır. Yukarıdaki cevabı kullanmak amacı geçersiz kılacaktır. Bootstrap'i kendi css dosyanızdaki sınıfları değiştirerek ve boostrap css'i ekledikten sonra bağlayarak kolayca özelleştirebilirsiniz.

Ekle:

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

sadece çevreye aşağıdaki <tr>gibi özel bir sınıf verin :

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

ve css'in yalnızca özel sınıfınızla birlikte <td>bir içindeki e'leri seçmesini <tr>sağlayın.

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

bunun gibi, diğer tabloları geçersiz kılma veya hatta bir önyükleme temel sınıfını geçersiz kılma riskini almazsınız (önceki bazılarının önerdiği gibi).