127

由于某种原因，表格内的文本仍然没有居中。为什么？如何使表格内的文本居中？

使其非常清晰：例如，我希望“Lorem”位于四个“1”的中间。​</p> 

@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

4

10 回答 10

194

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

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

<td class="text-center">some text</td>
于 2014-02-17T14:36:45.447 回答
163

的.table tdtext-align 设置为左​​对齐，而不是居中。

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

.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

于 2012-07-26T21:33:24.633 回答
37

我认为 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>初始化标签，然后复制到你想要的地方:) 我希望它有用 祝你有美好的一天 w stackoverflow

ps Bootstrap v3.2.0

于 2014-07-30T12:00:25.797 回答
32

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

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>
于 2013-06-21T06:14:21.433 回答
17 
<td class="text-center">

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

.text-center {
    text-align: center !important;
}
于 2013-06-04T12:00:46.907 回答
8

如果它只是一次，你不应该改变你的样式表。只需编辑那个特定的td：

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

干杯

于 2014-05-09T15:30:41.070 回答
6

我有同样的问题，一个更好的解决方法!important是在我的 CSS 中定义以下内容：

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

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

于 2014-02-24T09:12:07.327 回答
4

添加：

<p class="text-center"> Your text here... </p>
于 2013-12-07T16:37:55.520 回答
4

Bootstrap 的主要特点之一是它减少了 !important 标签的使用。使用上述答案会破坏目的。您可以通过修改自己的 css 文件中的类并在包含 boostrap css 后链接它来轻松自定义引导程序。

于 2013-09-24T13:16:20.520 回答
1

只需给周围<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;
}

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

于 2017-05-16T12:42:23.953 回答