将文本置于Twitter Bootstrap中的表格中

我有这个代码：

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

小提琴

由于某种原因，表格内的文字仍然不居中。 为什么？ 如何将表格中的文字居中？

为了让它真的很清楚：例如，我想让“Lorem”坐在四个“1”的中间。

Answer 1

.table td的文本alignment设置为左侧，而不是中心：

添加这应该居中它：

 .table td { text-align: center; } 

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

Answer 2

在Bootstrap 3（3.0.3）中，将"text-center"类添加到一个td元素是可以的。

也就是说，下面把some text放在一个表格单元中：

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

Answer 3

你可以通过在单元格内添加一个类为“text-center”的div来改变td的alignment方式而不改变css：

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

Answer 4

我认为谁是最好的混合为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> 

closures<table> init标签，然后复制你想要的地方:)我希望它可以是有用的有一个美好的一天w stackoverflow

ps Bootstrap v3.2.0

Answer 5

 <td class="text-center"> 

并在bootstrap.css中修复.text-center：

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

Answer 6

我有同样的问题和更好的方式来解决它，而不使用！重要的是在我的CSS中定义以下内容：

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

这样，文本中心类的特殊性在表中正确工作

Answer 7

Bootstrap的一个主要特性就是它减轻了！重要标签的使用。 使用上面的答案会击败目的。 你可以通过修改你自己的css文件中的类并在包含boostrap css之后将其链接起来，来轻松地定制bootstrap。

Answer 8

加：

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

Answer 9

这只是一次，你不应该改变你的样式表。 只要编辑特定的TD

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

干杯

Answer 10

只需给周围的一个自定义的类如：

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

并让CSS只select<td>内的<tr> <td> s与您的自定义类。

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

像这样，你不会冒险去覆盖其他表，甚至可以覆盖引导基类（就像我的一些前任build议的那样）。