如何在CSS中居中对齐文本？

Question

我怎样才能使文本居中对齐？

目前,对齐并不是最后一行的中心.

Answer 1

在Firefox中,这有效:

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

这是一个兼容性表:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility.似乎在IE中工作(不需要前缀),但Webkit浏览器还不支持它:(

请注意，截至 2018 年 7 月，这在 Safari 或 iOS Safari 中 [仍然不起作用](https://caniuse.com/#feat=css-text-align-last)。 (2认同)

Answer 2

对于人找得到的文本是两个中心,以合理的,下面应该工作:

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

使用以下CSS规则(width根据需要调整属性):

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

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;

请注意,截至2018年7月,在Safari或iOS Safari中,这[仍然不起作用](https://caniuse.com/#feat=css-text-align-last). (5认同)

Answer 4

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

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