Html 表格内部的文本对齐类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12829608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text-align class for inside a table
提问by Mediabeastnz
Is there a set of classes in Twitter's Bootstrap framework that aligns text?
Twitter 的 Bootstrap 框架中是否有一组对齐文本的类？
For example, I have some tables with $totals that I want aligned to the right...
例如，我有一些表格$，我想向右对齐......
<th class="align-right">Total</th>
and
和
<td class="align-right">,000,000.00</td>
回答by Michael J. Calkins
Bootstrap 3
引导程序 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>
Bootstrap 4
引导程序 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>
回答by Paolo Casciello
Using Bootstrap 3.x using text-rightworks perfectly:
使用 Bootstrap 3.x usingtext-right工作完美：
<td class="text-right">
text aligned
</td>
回答by jonschlinkert
No, Bootstrap doesn't have a class for that, but this kind of class is considered a "utility" class, similar to the ".pull-right" class that @anton mentioned.
不，Bootstrap 没有用于此的类，但这种类被视为“实用程序”类，类似于@anton 提到的“.pull-right”类。
If you look at utilities.less you will see very few utility classes in Bootstrap, the reason being that this kind of class is generally frowned upon, and is recommended to be used for either: a) prototyping and development - so you can quickly build out your pages, then remove the pull-right and pull-left classes in favor of applying floats to more semantic classes or to the elements themselves, or b) when it's clearly more practical than a more semantic solution.
如果您查看utilities.less，您会在Bootstrap 中看到很少的实用程序类，原因是这种类通常不受欢迎，建议将其用于：a) 原型设计和开发 - 这样您就可以快速构建出您的页面，然后删除右拉和左拉类，以便将浮动应用于更多语义类或元素本身，或者 b) 当它显然比更具语义的解决方案更实用时。
In your case, by your question it looks like you wish to have certain text align on the right in your table, but not all of it. Semantically, it would be better to do something like (I'm just going to make up a few classes here, except for the default bootstrap class, .table):
在您的情况下，根据您的问题，您似乎希望在表格右侧对齐某些文本，但不是全部。从语义上讲，最好做一些类似的事情（我只是在这里组成几个类，除了默认的引导类，.table）：
<table class="table price-table">
<thead>
<th class="price-label">Total</th>
</thead>
<tbody>
<tr>
<td class="price-value">,000,000.00</td>
</tr>
</tbody>
</table>
And just apply the text-align: leftor text-align: rightdeclarations to the price-value and price-label classes (or whatever classes work for you).
只需将text-align: leftortext-align: right声明应用于 price-value 和 price-label 类（或任何适合您的类）。
The problem with applying align-rightas a class, is that if you want to refactor your tables you will have to redo the markup and the styles. If you use semantic classes you might be able to get away with refactoring only the CSS content. Plus, if are taking the time to apply a class to an element, it's best practice to try to assign semantic value to that class so that the markup is easier to navigate for other programmers (or you three months later).
align-right作为类申请的问题是，如果您想重构您的表格，您将不得不重做标记和样式。如果您使用语义类，您可能能够只重构 CSS 内容。另外，如果要花时间将类应用于元素，最好尝试为该类分配语义值，以便其他程序员（或三个月后的您）更容易浏览标记。
One way to think of it is this: when you pose the question "What is this td for?", you will not get clarification from the answer "align-right".
一种思考方式是：当您提出“这个 td 有什么用？”这个问题时，您不会从答案“align-right”中得到澄清。
回答by David
Bootstrap 2.3 has utility classes text-left, text-right, and text-center, but they do not work in table cells. Until Bootstrap 3.0 is released (where they have fixed the issue) and I am able to make the switch, I have added this to my site CSS that is loaded after bootstrap.css:
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;
}
回答by Michael
Just add a "custom" stylesheet which is loaded after Bootstrap′s stylesheet. So the class definitions are overloaded.
只需添加一个“自定义”样式表，它会在 Bootstrap 的样式表之后加载。所以类定义被重载了。
In this stylesheet declare the alignment as follows:
在此样式表中声明对齐方式如下：
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
Now you are able to use the "common" alignment conventions for td and th elements.
现在您可以对 td 和 th 元素使用“通用”对齐约定。
回答by Anton
I guess because CSS already has text-align:right, AFAIK, Bootstrap doesn't have a special class for it.
我猜是因为 CSS 已经有了text-align:right，AFAIK，Bootstrap 没有专门的类。
Bootstrap does have "pull-right" for floating divs, etc. to the right.
Bootstrap 确实具有用于浮动 div 等的“右拉”功能。
Bootstrap 2.3 just came out and added text alignment styles:
Bootstrap 2.3 刚刚出来并添加了文本对齐样式：
Bootstrap 2.3 released(2013-02-07)
Bootstrap 2.3 发布(2013-02-07)
回答by dKen
Bootstrap 4 is coming! The utility classes made familiar in Bootstrap 3.xare now break-point enabled. The default breakpoints are: xs, sm, md, lgand xl, so these text alignment classes look something like .text-[breakpoint]-[alignnment].
Bootstrap 4 来了！在 Bootstrap3.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>
Important:As of writing this, Bootstrap 4 is only in Alpha 2. These classes and how they're used are subject to change without notice.
重要提示：在撰写本文时，Bootstrap 4 仅在 Alpha 2 中。这些类及其使用方式如有更改，恕不另行通知。
回答by Gothburz
Bootstrap text alignment in v3.3.5:
v3.3.5 中的 Bootstrap 文本对齐：
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
回答by Vanshaj Rai
The following lines of code are working properly. You can assign the classes like text-center, left or right, The text will align accordingly.
以下代码行正常工作。您可以分配文本中心、左或右等类别，文本将相应对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
Here there isn't any need to create any external class. These are the Bootstrap classes and have their own property.
这里不需要创建任何外部类。这些是 Bootstrap 类并且有它们自己的属性。
回答by kushal kant
You can use this CSS below:
您可以在下面使用此 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 */
