居中文本在表格中Twitter的引導

我有這樣的代碼：居中文本在表格中Twitter的引導

<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

出於某種原因，該表中的文本仍然不居中。爲什麼？如何將表格中的文字居中？

爲了讓它真的很清楚：例如，我想讓「Lorem」坐在四個「1」的中間。

來源

2012-07-26 Sven

117

.table td的文本對齊設置爲左，而不是中心：

添加這應該居中：

.table td { 
    text-align: center; 
}

更新小提琴：http://jsfiddle.net/JeCpZ/1/

來源

2012-07-26 21:33:24 Tim

+35

在以後的版本中有一個文本中心類。 – 2013-03-21 21:04:42

注意：.table td {text-align：center; }將集中你所有的TDs – rbp 2013-04-02 15:00:22

@ xr09是的，'.text-center'，但是.table td'的特殊性仍然會失敗。這就是爲什麼引導程序應該從標記名開始，而不是直接啓動到像'.table'這樣的類中。 – Sinetheta 2013-05-22 17:35:22

<td class="text-center">

和修復.text-center in bootstrap.css：

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

來源

2013-06-04 12:00:46 XAOPT

我相信你不想直接改變bootstrap.css。 – 2013-10-07 14:24:07

我不需要在bootstrap.css中修復.text-center，這個工作沒有它。 – user573335 2013-10-23 09:53:25

可以使TD的對齊不加入一個div一類「文本中心」的改變CSS的細胞內：

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

來源

2013-06-21 06:14:21 user2507821

誰定義了'class'？ – 2013-06-21 06:36:44

Bootstrap [here]（http://twitter.github.io/bootstrap/base-css.html#typography）。 – caneta 2013-07-02 08:55:23

據我所知，在Bootstrap 2.3中，'td {text-align：left}'將覆蓋任何額外的嘗試來居中。我只是試圖這樣做，沒有成功。 – 2013-07-16 21:24:17

一個引導的主要特徵是，它減輕使用！！重要標籤。使用上面的答案會破壞目的。通過修改自己的css文件中的類並在包含boostrap css後將其鏈接起來，您可以輕鬆地自定義引導程序。

來源

2013-09-24 13:16:20

添加：

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

來源

2013-12-07 16:37:55

128

在自舉3（3.0.3）將"text-center"類到td元件開箱的。

即在表格單元格下面的中心some text：

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

來源

2014-02-17 14:36:45

我喜歡這個解決方案來改變整個.table td風格。 – Stuart 2015-09-09 22:49:26

您也可以將表格「text-center」添加到表格元素中。 – shad0wec 2017-04-21 11:53:41

它適合我。謝謝。 – gustav 2017-07-29 14:29:36

我有同樣的問題，更好的辦法來解決它，而無需使用重要的是定義在我的CSS如下：

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

這樣，文本中心類的特定性在表格中正確工作

來源

2014-02-24 09:12:07 VSP

如果它只是一次，則不應更改樣式表。只需編輯特定TD

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

乾杯

來源

2014-05-09 15:30:41 Breno

我覺得誰對HTML & CSS的快速和清潔國防部的最佳組合是：

<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標記，然後複製其中你想:) 我希望它可以有用祝你有個愉快的日子 w stackoverflow

p.s.引導V3.2.0

來源

2014-07-30 12:00:25 dbjoomla

雖然這個問題已經有答案，但沒有發佈新答案的意思！ – 2014-07-30 12:21:37

只是給周圍<tr>自定義類，如：

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

，並有CSS只能選擇<td> S中的一個<tr>內與您的自定義類。這樣你就不會冒險重寫其他表，甚至可以覆蓋引導基類（就像我的一些前任建議的那樣）。

來源

2017-05-16 12:42:23

居中文本在表格中Twitter的引導

回答

相關問題