Question

如何对文本进行居中对齐？

目前，对齐并不是最后一行的中心。

Answer 1

您可以使用text-align-last属性

.center-justified {
    text-align: justify;
    text-align-last: center;
}

以下是兼容性表：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility。

适用于除Safari（包括Mac和iOS）以外的所有浏览器，包括Internet Explorer。

同样在Internet Explorer中，仅适用于text-align: justify（不允许text-align）和start以及end的其他值。

Answer 2

对于希望获取两者居中和对齐的文字的人，以下内容应该有效：

<div class="center-justified">...lots and lots of text...</div>

使用以下CSS规则（根据需要调整width属性）：

.center-justified {
  text-align: justify;
  margin: 0 auto;
  width: 30em;
}

这是live demo。

发生了什么事？

text-align: justify;确保文字填满其所附的div的整个宽度。
margin: 0 auto;实际上是四条规则的简写：
- 第一个值用于margin-top和margin-bottom规则。因此，整个事情意味着margin-top: 0; margin-bottom: 0，即div之上或之下没有边距。
- 第二个值用于margin-left和margin-right规则。因此，此规则会生成margin-left: auto; margin-right: auto。这是一个聪明的一点：它告诉浏览器采取两侧可用的空间并在左右均匀分布。结果是居中的文字但是，如果没有
width: 30em;，它限制了div的宽度。只有当宽度受到限制时，才会留下一些空白，以便margin: auto分配。如果没有这个规则，div将占用所有可用的水平空间，并且您将失去居中效果。

Answer 3

使用此代码

text-align: justify; text-align-last: center;

Answer 4

似乎没有办法。您可以使用对齐方式伪造它，然后将最后一行文本包装在一个范围内，并将其设置为文本对齐中心。它适用于小块文本，但不适用于大量文本或动态文本。

我建议在Adobe找一个参与他们W3C工作的人并唠叨他们在下次会议中提出左/右/中心理由。如果有人能够推动CSS中的基本排版功能，那就是Adobe。

Answer 5

<div class="centered">
<p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div>

我能够通过将内容包装在div标签中并应用属性text-align：center来实现结果。在div标签之后，我立即将内容包装在段落标记和应用属性中，text-align：justify。为了使最后一行居中，我将其从段落标记中排除，然后回退到div标记中应用的属性。你只需要在最后一行描述你想要多少个单词。我从小提琴中加入了一个演示。希望这可以帮助。

Demo - Center Justify Paragraph Text

Answer 6

计算文本行的长度并创建一个大小相同的块作为文本行。中心块。如果你有两条线，如果长度不同，则需要两个区块。如果您不希望块中有额外的空格，则可以使用span标记和br标记。您还可以使用pre标签在块内进行格式化。

你可以这样做：风格=“文本对齐：中心;”

垂直查看： http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

这是块和网页布局的最佳方式，请到这里学习灵活的2009年开始的新标准。 http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#justify-content-property

w3schools也有很多灵活的例子。

Answer 7

对于具有固定宽度的非动态文本的解决方案（不是最好的，但仍然适用于某些情况）。对于有一点空间“拉伸”文本到结尾的情况，这种情况很有用该倒数第二行。在段落的末尾做一些符号（试验它们的长度）并隐藏它;适用于段落绝对位置或只是用填充/游戏来纠正自由空间。

用于居中对齐文本的良好的兼容性/交叉浏览方式。

示例（之前的段落）：

.paragraph {
    width:455px;
    text-align:justify;
}

.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div>

修复后：

.paragraph {
    width:455px;
    text-align:justify;
    position:relative;
}
.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}
.paragraph b{
  opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}

<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div>

Answer 8

简单。文字对齐：对齐; （使元素对齐）填充左：？px; （使元素居中）

Answer 9

此处的大多数解决方案都没有考虑任何类型的自适应文本框。

段落最后一行的文字数量取决于观众浏览器的大小，因此变得非常困难。

我想简而言之，如果你想要任何类型的浏览器/移动响应，这是不可能的:(

如何在CSS中居中对齐最后一行文本？

9 个答案:

发生了什么事？