表格内部的文本对齐类
[英]Text-align class for inside a table
问题描述
Twitter 的 Bootstrap 框架中是否有一组对齐文本的类？
例如，我有一些带有$ totals 的表格，我想向右对齐...
<th class="align-right">Total</th>
和
<td class="align-right">$1,000,000.00</td>
22 个解决方案
解决方案1
1473 已采纳 2013-02-28 16:03:10
引导程序 3
<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
<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>
解决方案2
82 2014-02-10 15:55:50
使用带有text-right Bootstrap 3.x 完美地工作：
<td class="text-right">
text aligned
</td>
解决方案3
47
不，Bootstrap 没有用于此的类，但这种类被视为“实用程序”类，类似于@anton 提到的“.pull-right”类。
如果您查看utilities.less，您将在Bootstrap 中看到很少的实用程序类，原因是这种类通常不受欢迎，建议将其用于：a) 原型设计和开发 - 这样您就可以快速构建出您的页面，然后删除右拉和左拉类，以便将浮动应用于更多语义类或元素本身，或者 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声明应用于 price-value 和 price-label 类（或任何适合您的类）。
将align-right作为一个类应用的问题是，如果你想重构你的表格，你将不得不重做标记和样式。 如果您使用语义类，您可能能够只重构 CSS 内容。 另外，如果要花时间将类应用于元素，最好尝试为该类分配语义值，以便其他程序员（或三个月后的您）更容易浏览标记。
一种思考方式是：当您提出“这个 td 有什么用？”这个问题时，您不会从答案“align-right”中得到澄清。
解决方案4
37 2013-04-05 17:58:49
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;
}
解决方案5
27 2013-06-04 11:20:32
只需添加一个“自定义”样式表，它会在 Bootstrap 的样式表之后加载。 所以类定义被重载了。
在此样式表中声明对齐方式如下：
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
现在您可以对 td 和 th 元素使用“通用”对齐约定。
解决方案6
23 2012-10-10 22:52:36
我猜是因为 CSS 已经有text-align:right ，AFAIK，Bootstrap 没有专门的类。
Bootstrap 确实具有用于右侧浮动 div 等的“右拉”。
Bootstrap 2.3 刚刚出来并添加了文本对齐样式：
Bootstrap 2.3 发布(2013-02-07)
解决方案7
15 2016-03-18 14:42:09
Bootstrap 4 来了！ 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 中。这些类及其使用方式如有更改，恕不另行通知。
解决方案8
12 2015-10-14 22:02:38
v3.3.5 中的 Bootstrap 文本对齐：
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
解决方案9
11 2015-05-22 06:30:22
以下代码行正常工作。 您可以分配文本中心、左或右等类别，文本将相应对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
这里不需要创建任何外部类。 这些是 Bootstrap 类并且有它们自己的属性。
解决方案10
10 2015-10-08 08:29:26
您可以在下面使用此 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 */
解决方案11
8 2013-02-08 02:59:39
.text-align类是完全有效的，并且比不再使用的.price-label和.price-value更有用。
我建议使用名为的自定义实用程序类 100%
.text-right {
text-align: right;
}
我喜欢做一些魔术，但这取决于你，比如：
span.pull-right {
float: none;
text-align: right;
}
解决方案12
7 2016-12-31 07:00:58
这是一个带有示例的简短而甜蜜的答案。
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>
解决方案13
6 2015-07-17 20:37:49
哦，随着 Bootstrap 3 的发布，您可以使用text-center类进行居中对齐、 text-left用于左对齐、 text-right用于右对齐和text-justify用于对齐对齐。
Bootstrap 是一个非常简单的前端框架，一旦你使用它。 以及非常容易定制以满足您的喜好。
解决方案14
6 2016-03-01 01:38:29
扩展David 的回答，我只是添加一个简单的类来增强 Bootstrap，如下所示：
.money, .number {
text-align: right !important;
}
解决方案15
3 2016-07-14 12:26:49
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>
解决方案16
3 2017-01-27 11:31:15
这是最简单的解决方案
您可以分配文本中心、左侧或右侧等类别。 文本将相应地与这些类对齐。 您不必单独制作课程。 这些类内置在 BootStrap 3 中
<h1 class="text-center"> Heading 1 </h1>
<h1 class="text-left"> Heading 2 </h1>
<h1 class="text-right"> Heading 3 </h1>
在这里检查：演示
解决方案17
3 2019-11-03 07:08:10
在 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>
希望对你有帮助。
解决方案18
2 2021-05-11 10:12:59
引导程序 5
在 Bootstrap 版本 5 中，更改了文本对齐实用程序类。 使用以下新类来对齐文本：
-
text-lefttext-start用于左对齐。 -
text-center用于居中对齐。 -
text-righttext-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>
解决方案19
1 2017-03-08 12:20:09
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
解决方案20
1 2020-05-16 22:29:03
使用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>
解决方案21
0 2016-02-10 11:50:20
在这三个类中 Bootstrap 无效类
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
解决方案22
0 2021-01-03 04:16:48
如果它在 Bootstrap 4.5 中使用text-sm-right似乎不起作用，请考虑可能表格的内容太多并且表格不是容器的 100%（例如，col）
使表格 100% 宽：
<table class="w-100">
使用文本对齐中心使表格居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.