【问题标题】：Text-align class for inside a table表格内的文本对齐类
【发布时间】：2012-10-01 12:43:29
【问题描述】：

Twitter 的 Bootstrap 框架中是否有一组对齐文本的类？

例如，我有一些表格的总数为$，我想向右对齐...

<th class="align-right">Total</th>

和

<td class="align-right">$1,000,000.00</td>

【问题讨论】：

标签： html css twitter-bootstrap text-align

【解决方案1】：

在 Bootstrap 版本 4 中。有一些用于定位文本的内置类。

用于居中表格标题和数据文本：

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

您还可以使用这些类来定位任何文本。

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

For more details

【讨论】：

【解决方案2】：

引导程序 3

v3 Text Alignment Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

引导程序 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

引导程序 5

v5 Text Alignment Docs

text-left 已替换为text-start， text-right 已替换为 text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

【讨论】：

不幸的是，这不适用于表格单元格。这可能只是 CSS 订单问题。请参阅此问题 [github.com/twitter/bootstrap/issues/6837]。应该在 3.0 版中修复。
Atm 我用
bootin
来解决这个问题。
我希望引导程序在此类中使用断点，例如：text-right-md 用于将文本向右对齐，仅用于中等向上。
文本左对齐。

居中对齐文本。

右对齐文本。

对齐文本。

无换行文本。
奇怪的是，我尝试使用 text-md-right（和 xs & lg）但它们不起作用。我在 Codepen，所以这可能与它有关。无论如何，这个答案对我有用。谢谢！

【解决方案3】：

引导程序 5

v5 text alignment docs

在 Bootstrap 版本 5 中，更改了文本对齐实用程序类。使用以下新类来对齐文本：

~~text-left~~ text-start 用于左对齐。
text-center 用于中心对齐。
~~text-right~~ text-end 用于右对齐。

这些类也可以在表格中使用。右对齐单元格内的文本

    <td class="text-end">$1,000.00</td>

如果要在整列中右对齐文本，可以使用 css nth-child 属性

/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
    text-align: right;
}

完整解决方案请参考以下示例

/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
  text-align: right;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <table class="table table-bordered custom-table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11 May 2021</td>
        <td>Paula Allen</td>
        <td>$104.98</td>
      </tr>
      <tr>
        <td>10 May 2021</td>
        <td class="text-end">Kevin(right-align)</td>
        <td>$233.00</td>
      </tr>
      <tr>
        <td>09 May 2021</td>
        <td>Joyes Murray</td>
        <td>$170.25</td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

【解决方案4】：

Bootstrap 4 对此有五个类：text-left、text-center、text-right、text-justify 和 text-nowrap。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

【讨论】：

【解决方案5】：

如果使用 text-sm-right 在 Bootstrap 4.5 中似乎无法正常工作，请考虑表格的内容可能太多并且表格不在容器的 100% 处（例如 col）

使表格 100% 宽：

 <table class="w-100">

【讨论】：

【解决方案6】：

使用text-align:center !important。可能还有其他text-align css 规则，所以!important 很重要。

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

【讨论】：

【解决方案7】：

Bootstrap 2.3 具有实用程序类 text-left、text-right 和 text-center，但它们不适用于表格单元格。在 Bootstrap 3.0 发布之前（他们已经解决了问题）并且我能够进行切换，我已将此添加到我的站点 CSS 中，该 CSS 在 bootstrap.css 之后加载：

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

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

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

【讨论】：

【解决方案8】：

这里有一个简短而甜蜜的答案，并附有一个例子。

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

【讨论】：

HTML 标签link 和script 在head 或body 标签之外是否有效？为什么不提供一个完整有效的 HTML 文档示例？

【解决方案9】：

扩展David's answer，我只是添加一个简单的类来增强 Bootstrap，如下所示：

.money, .number {
    text-align: right !important;
}

【讨论】：

【解决方案10】：

这三个类Bootstrap无效类

 .text-right {
     text-align: right; }

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

 .text-left {
    text-align: left; }

【讨论】：

这个问题已经有好几个高质量的答案了，大部分都是三年前问这个问题的时候贴出来的。尽管尝试回答诸如此类的简单问题以提高您的编程能力可能是一项值得练习的练习，但以当前状态发布此答案不会对问题添加任何内容。如果您的回答有什么新奇之处，请用几句话来解释它有何不同以及为什么它会变得更好。
你说的“在这三个类中Bootstrap无效类”是什么意思？你能详细说明吗？特别是对于“无效类”.

【解决方案11】：

v3.3.5 中的引导文本对齐方式：

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen example

【讨论】：

【解决方案12】：

您可以在下面使用此 CSS：

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

【讨论】：

【解决方案13】：

哇，随着 Bootstrap 3 的发布，您可以使用 text-center 的类进行居中对齐，text-left 用于左对齐，text-right 用于右对齐，text-justify 用于对齐对齐。

Bootstrap 是一个非常简单的前端框架，一旦你使用它就可以使用它。并且非常容易根据自己的喜好进行定制。

【讨论】：

【解决方案14】：

以下代码行正常工作。您可以分配文本中心，左或右等类，文本将相应对齐。

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

这里不需要创建任何外部类。这些是 Bootstrap 类并且有自己的属性。

【讨论】：

【解决方案15】：

.text-align 类是完全有效的，并且比拥有不再使用的 .price-label 和 .price-value 更有用。

我建议 100% 使用一个名为

的自定义实用程序类

.text-right {
  text-align: right;
}

我喜欢做一些魔术，但这取决于你，比如：

span.pull-right {
  float: none;
  text-align: right;
}

【讨论】：

是的，每个类都是完全“有效的”，但它不是语义的。您应该在生产代码中谨慎使用实用程序类，它们用于“引导”。
因为 w3 说这是使用 clases 的正确方法并不意味着它是最好的。如果不是因为“非语义”类，jQuery UI 和 Bootstrap 就不会存在。人们倾向于对类使用语义，直到他们意识到在所有方面都使用泛型要好得多。一开始很难得到或认为它实际上很好，我走了那条路......
jQuery UI 是一个不好的例子，因为它是一个也包含 CSS 的 javascript 库，而且正如我所指出的，Bootstrap 使用实用程序类作为 UTILITIES。你有没有想过为什么 Bootstrap 叫Bootstrap？这样您就可以使用这些类进行开发并在您的生产代码中更改它们。而且我并没有说根本不使用它们，我使用 pull-left，pull-right 相当多。而且我有时也使用文本中心。但我很少使用它们，我不建议其他人使用它们而不是更好、更语义化的选项。
jQuery UI 只是一个例子。我正在谈论的方法是使图书馆工作的原因。我们可以看到 kendo、blueprint、grid、960、Chico UI，甚至 Bootstrap 本身都是这样做的。这是这个库可以存在/工作的唯一方式。你可以看看大公司是如何像 Apple (images.apple.com/v/imac/a/styles/imac.css) 这样使用 css 的，你会印象深刻的。这说明了生产力和一件大事。老实说，我很惊讶没有找到解释这个的教程。我认为引导这个术语是因为它是你必须开始的东西，而不是以后改变。

【解决方案16】：

不，Bootstrap 没有这样的类，但是这种类被认为是“实用程序”类，类似于@anton 提到的“.pull-right”类。

如果你查看 utility.less，你会在 Bootstrap 中看到非常少的实用程序类，原因是这种类通常不受欢迎，建议用于以下任一情况： a) 原型设计和开发 - 这样您就可以快速构建页面，然后删除 pull-right 和 pull-left 类，以便将浮动应用于更多语义类或元素本身，或者 b) 当它明显比语义化解决方案更实用时。

在您的情况下，根据您的问题，您似乎希望某些文本在表格的右侧对齐，但不是全部。从语义上讲，最好做一些类似的事情（我只是在这里组成几个类，除了默认的引导类，.table）：

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

只需将text-align: left 或text-align: right 声明应用于价格值和价格标签类（或任何适合您的类）。

将align-right 作为一个类应用的问题在于，如果你想重构你的表，你将不得不重做标记和样式。如果您使用语义类，您也许可以只重构 CSS 内容而侥幸成功。另外，如果花时间将类应用于元素，最好尝试为该类分配语义值，以便其他程序员（或三个月后）更容易导航标记。

一种思考方式是：当您提出“这个 td 是做什么用的？”的问题时，您不会从“align-right”的答案中得到澄清。

【讨论】：

顺便说一句，我相信你可以比我选择的类名做得更好。但这不是重点
他们当时没有，IMO 仍然不应该。

【解决方案17】：

我猜是因为 CSS 已经有 text-align:right，AFAIK，Bootstrap 没有专门的类。

Bootstrap 确实具有“向右拉”功能，用于向右浮动 div 等。

Bootstrap 2.3 刚出来并添加了文本对齐样式：

Bootstrap 2.3 released (2013-02-07)

【讨论】：

是的，我不想在每个元素上使用内联样式。我知道pull-right，但我不希望元素浮动。如果没有，我可能会添加一个类:)

【解决方案18】：

这是最简单的解决方案

您可以分配文本中心、左或右等类。文本将相应地与这些类对齐。您不必单独上课。这些类内置在 BootStrap 3 中

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

检查这里： Demo

【讨论】：

【解决方案19】：

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

视口大小为 MD（中）或更宽的左对齐文本。在 LG（大）或更宽的视口上左对齐文本。在 XL（特大）或更宽的视口上左对齐文本。

【讨论】：

【解决方案20】：

Bootstrap 4 is coming! Bootstrap 3.x 中熟悉的实用程序类现在启用了断点。默认断点为：xs、sm、md、lg 和 xl，因此这些文本对齐类看起来类似于 .text-[breakpoint]-[alignnment]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要提示：在撰写本文时，Bootstrap 4 仅在 Alpha 2 中。这些类及其使用方式如有更改，恕不另行通知。

【讨论】：

这让我在安装 Bootstrap 4 时阅读 Bootstrap 3 文档时措手不及。谢谢提醒！

【解决方案21】：

使用 text-right 的 Bootstrap 3.x 效果很好：

<td class="text-right">
  text aligned
</td>

【讨论】：

您也可以将其应用于整行：文本对齐

【解决方案22】：

只需添加一个在 Bootstrap 样式表之后加载的“自定义”样式表。所以类定义被重载了。

在这个样式表中声明对齐方式如下：

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

现在您可以对 td 和 th 元素使用“通用”对齐约定。

【讨论】：