在Twitter Bootstrap中将文本居中放置在表格中

由于某种原因，表格内的文本仍未居中。为什么？如何在表格内居中放置文字？

为了使它更清晰：例如，我希望“ Lorem”位于四个“ 1”的中间。

@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 td左，而不是中心的文本对齐设置。

添加它应该使您td的所有s 居中：

.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

在Bootstrap 3（3.0.3）中，将"text-center"类添加到td元素中可以直接使用。

即，some text表格单元格中的以下中心：

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

我认为谁是HTML和CSS的最佳组合，以实现快速，干净的mod：

<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标记，然后复制到您想要的位置：）我希望它会有用。

ps Bootstrap v3.2.0

您可以通过在单元格内添加带有“文本中心”类的div来使td对齐而不更改css：

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

<td class="text-center">

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

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

我遇到了同样的问题，没有使用它的一种更好的解决方法!important是在CSS中定义以下内容：

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

这样，text-center该类的特殊性可以在表中正常工作。

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

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

干杯

Bootstrap的主要功能之一是减轻了！important标签的使用。使用以上答案将无法达到目的。您可以通过修改自己的css文件中的类并在包含boostrap css之后进行链接来轻松自定义引导程序。

加：

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

只需给周围<tr>的自定义类，如：

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

并有CSS只能选择<td>S中的内部的<tr>与您的自定义类。

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

像这样，您不必冒险覆盖其他表，甚至也不必覆盖引导基类（就像我建议的某些前辈一样）。