表格内部的文本对齐类

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

例如，我有一些带有$总计的表，我想将它们对齐到右…

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

和

<td class="align-right">$1,000,000.00</td>
1554476 次浏览
小开

我想是因为CSS已经有了text-align:right，AFAIK，Bootstrap没有一个特殊的类。

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

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

Bootstrap 2.3发布（2013-02-07）

小开

不，Bootstrap没有这样的类，但这种类被认为是一个“实用程序”类，类似于@安东提到的“. dral-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声明应用于价格价值和价格标签类（或任何适合您的类）。

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

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

小开

.text-align类是完全有效的，比没有用的.price-label和.price-value更有用。

我建议100%使用一个名为

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

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

span.pull-right {
float: none;
text-align: right;
}
小开
最佳答案

bootstrap3

v3文本对齐文档

<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>

引导3文本对齐示例

bootstrap4

v4文本对齐文档

<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>

引导4文本对齐示例

Bootstrap 5

v5文本对齐文档

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>
小开

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

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


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


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

只需添加一个“自定义”样式表，该样式表在Bootstrap的样式表之后加载。因此类定义被重载。

在此样式表中，对齐方式声明如下：

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

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

小开

使用Bootstrap 3. x使用text-right完美工作：

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

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

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

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

小开

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

Bootstrap是一个非常简单的前端框架，一旦你使用它。以及非常容易定制以满足您的喜好。

小开

您可以在下面使用此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 */
小开

在v3.3.5中引导文本对齐：

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

CodePen例子

小开

在这三个类中Bootstrap无效类

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


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


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

扩展大卫的回答，我只是添加一个简单的类来增强Bootstrap，如下所示：

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

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>

重要提示：在撰写本文时，Bootstrap 4仅在Alpha 2中。这些类及其使用方式可能会发生变化，恕不另行通知。

小开

bootstrap4有五个类：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>

小开

这是一个简短而甜蜜的答案，举了一个例子。

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>

小开

这是最简单的解决办法

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

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

点击这里： Demo

小开 
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
在MD（中等）或更宽的视口上左对齐文本。

在LG（大）或更宽的视口上左对齐文本。

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

小开

在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>

更多详情

小开

使用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>

小开

如果在Bootstrap 4.5中使用text-sm-right似乎不起作用，请考虑可能内容对于表来说太多了，并且表不是容器的100%（例如）

输入图片描述

让桌子100%宽：

 <table class="w-100">
小开

Bootstrap 5

v5文本对齐文档

在Bootstrap版本5中，文本对齐实用程序类发生了变化。使用以下新类对齐文本：

  • 文本左键text-start用于左对齐。
  • text-center用于中心对齐。
  • 文字右键text-end用于右对齐。

此类也可以在表格中使用。在单元格中右对齐文本

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

如果你想在整列中右对齐文本，你可以使用cssnth-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>


提交答案