web-gelistirme-sc.com

Twitter Bootstrap'daki bir tablodaki metni merkezleme

Bende bu kod var:

<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

Bazı nedenlerden dolayı, tablonun içindeki metin hala ortalanmamıştır. Niye ya? Metni masanın içinde nasıl ortalayabilirim?

Bunu açıkça belirtmek için: Örneğin, "Lorem" in dört "1" in tam ortasında oturmasını istiyorum.

96
Sven

.table td 'nin metin hizalaması merkez yerine sola ayarlanır:

Bunu eklemek ortalanmalıdır: 

.table td {
   text-align: center;   
}

Güncellenen keman: http://jsfiddle.net/JeCpZ/1/

132
Tim

Bootstrap 3'te (3.0.3) "text-center" sınıfını td öğesine ekleme, kutunun dışında çalışır.

Örneğin, bir tablo hücresinde aşağıdaki merkezler some text merkezidir:

<td class="text-center">some text</td>
151
Alex Che

Hızlı ve temiz mod için html & 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 ardından istediğiniz yere kopyalayın:) İnşallah faydalı olabilir.

not; Önyükleme v3.2.0

28
dbjoomla

Hücre içine "text-center" sınıfı olan bir div ekleyerek css'yi değiştirmeden td'nin hizalamasını yapabilirsiniz:

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

ve bootstrap.css içindeki .text-center'ı düzeltin:

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

Aynı sorun vardı ve kullanmadan çözmek için daha iyi bir yol! Önemli benim css aşağıdaki tanımlayan oldu:

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

Bu şekilde, metin merkezi sınıfının özelliği tablolarda doğru çalışıyor

5
VSP

Bootstrap'ın temel özelliklerinden biri! İmportant etiketinin kullanımını hafifletmesidir. __ Yukarıdaki cevabı kullanmak amacı yenecektir. Bootstrap'i kendi css dosyanızdaki sınıfları değiştirerek ve boostrap css'i ekledikten sonra bağlayarak kolayca özelleştirebilirsiniz.

4
Thoshi B

eklemek:

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

Kimlik sadece bir kez, stil sayfanızı değiştirmemelisiniz .

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

Şerefe

3
Breno

çevreleyen <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 bir <td> içinde olan <tr>s seçmesini sağlayın.

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

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

0
Peter Piper