在Twitter Bootstrap中将表格中的文本居中

Question

我有这个代码:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

小提琴

出于某种原因,表格内的文字仍然没有居中.为什么？如何将文本置于表格中心？

为了使它真正清晰:例如,我希望"Lorem"坐在四个"1"的中间.

Answer 1

在Bootstrap 3(3.0.3)中,将"text-center"类添加到td元素中是开箱即用的.

即,以下中心some text位于表格单元格中:

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

Answer 2

.table td 文本对齐设置为左,而不是居中:

添加它应该集中在它:

.table td {
   text-align: center;   
}

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

Answer 3

我认为对于快速和干净的mod,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

ps Bootstrap v3.2.0

Answer 4

你可以通过在单元格中添加一个带有"text-center"类的div来使td对齐而不改变css:

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

Answer 5

<td class="text-center">

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

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

Answer 6

加：

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

Answer 7

我有同样的问题和更好的解决方法而不使用!important在我的css中定义了以下内容:

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

这样,文本中心类的特定性在表中正常工作

Answer 8

如果只是一次，则不应更改样式表。只需编辑该特定内容td：

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

干杯