文本对齐 | CSS-Tricks

CSS 中的 text-align 属性用于对齐块级元素的内部内容。

p {
  text-align: center;
}

这些是 text-align 的传统值

left – 默认值。内容沿左侧对齐。
right – 内容沿右侧对齐。
center – 内容居中于左右边缘之间。每一行左右两侧的空白区域应相等。
justify – 内容均匀分布，使尽可能多的块元素在一行中显示，并且该行的第一个词位于左侧边缘，最后一个词位于右侧边缘。
inherit – 该值将是父元素的值。

这里使用“内容”一词而不是“文本”，因为尽管 text-align 确实会影响文本，但它会影响该容器中的所有内联或内联块元素。

CSS3 中也有两个新值，start 和 end。这些值使得多语言支持更容易。例如，英语是自左向右 (ltr) 语言，而阿拉伯语是自右向左 (rtl) 语言。使用“right”和“left”作为值过于僵化，并且不能随着方向的变化而变化。这些新值会适应变化。

start – 在 ltr 中与“left”相同，在 rtl 中与“right”相同。
end – 在 ltr 中与“right”相同，在 rtl 中与“left”相同。

还有 match-parent，它类似于 inherit，只是新值是根据当前元素的方向计算的，而不是，你知道，不这样做。

规范中有一些还没有任何浏览器支持的内容。一种是“start end”值，它会将第一行对齐为“start”，而任何后续行则对齐为“end”。另一个是给值一个字符串，例如 text-align: "." start; 文本将沿该 <string> 的第一个出现位置对齐，例如将一列数字沿小数点对齐。

示例

此文本左对齐。

此文本右对齐。

我居中！

我已对齐。我完全填充了空间（最后一行的除外），即使有时需要稍微拉伸一下。

我继承了父元素的对齐方式。在这种情况下，这意味着左对齐。

其他资源

浏览器支持

对于 left、right、center、justify

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	3.5+	3+	任何	任何

对于 start 和 end 值

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	3.1+	3.6+	无	无	任何	任何

ZOM

# 2013 年 12 月 5 日

确实是一篇很棒的文章。内容丰富，非常感谢！

p.s.
在开头和结尾部分，"阿拉伯语是一种从左到右 (rtl) 的语言。"

Ahmad Alfy

评论永久链接# 2014 年 7 月 14 日

我来这里就是为了问这个问题！

luci

# 2014 年 2 月 12 日

看起来 Opera 19 现在支持 text-align: start / end。

Samiullah Khan

# 2014 年 3 月 31 日

哪些显示属性支持 text-align，例如，如果我将 h4 样式设置为
h4{
display:block;
}
它是否会接受 text-align:center 属性？

Samiullah Khan

评论永久链接# 2014 年 3 月 31 日

h4 默认情况下是块级元素，如果我将其浮动或将其位置从 static 更改，它还会接受 text-align center 吗？
iskael

评论永久链接# 2014 年 6 月 5 日

不会……它将左对齐
但你可以使用 width:100%，它将接受 text-align:center

Soumya

# 2014 年 5 月 13 日

text-align:center 在具有 10px 填充的 position relative div 上不起作用。有什么建议吗？

iskael

评论永久链接# 2014 年 6 月 5 日

真的吗？
你能给我一个你的案例的例子（演示）吗？
ratnesh

评论永久链接# 2021 年 2 月 1 日

text-align 对所有元素都有效，除了宽度由用户设置的块级元素，对于这种情况，你需要使用 margin:auto;

Randall

# 2014 年 5 月 21 日

TypeO

阿拉伯语是一种从左到右 (rtl) 的语言

应该是

阿拉伯语是一种从右到左 (rtl) 的语言

blyk

# 2014 年 6 月 29 日

你能告诉我如何相对于小数点对齐数字吗？
*12.34
**2.45
120.13
450.00

Gabriel

# 2014 年 10 月 24 日

嗨，CSS 大师……

我遇到一个棘手的文本居中问题，我希望你能帮忙……

当我向某些文本添加硬换行时，文本行的居中计算包括 BR 标签之前的任何空格。

使用自然断点（没有 BR 标签）文本行会忽略任何尾随空格而居中……

这不是什么大问题，但对于一个挑剔的设计师来说，文本居中显然是错误的。

你知道只用 CSS 有什么方法可以解决这个问题吗 - 除了明显地删除 BR 标签之前的任何空格之外？[多语言 CMS，有各种用户 - 需要能够进行一些基本的排版，而不会产生太多开销]

示例

.center {text-align:center; width:145px; margin:2em 0; font: bold 20px/100% sans-serif; letter-spacing:-0.05em}
the quick bron fox jumps over the lazy dawg
the quick bron fox jumps over the lazy dawg

就像我说的 - 不是很大区别 - 但是……

Gabriel

评论永久链接# 2014 年 10 月 24 日

代码丢失了……
<style>.center {text-align:center; width:145px; margin:2em 0; font: bold 20px/100% sans-serif; letter-spacing:-0.05em}</style> <div class="center">the quick bron fox jumps over the lazy dawg</div> <div class="center">the quick bron <br>fox jumps over the lazy dawg</div>
megavath bichu

评论永久链接# 2016 年 10 月 3 日

嗨，你能告诉我盒子模型的简写属性吗？

Summon Agus

# 2014 年 10 月 25 日

我如何像 Microsoft Office 2013 一样，通过时间线使文本对齐到 "开始"？

Summon Agus

评论永久链接# 2014 年 10 月 25 日

对于我的在线编辑项目，http://root-editor.blogspot.com/

agaust

# 2014 年 11 月 26 日

非常好……。

测试

# 2015 年 3 月 12 日

“…阿拉伯语是一种从左到右 (rtl) 的语言”

不……不是！它是一种从右到左的语言：rtl

# 2015 年 9 月 13 日

嗨，我在我的博客上将我的类别（位于帖子标题的顶部）居中时遇到了问题。
Text-align: center; 不起作用，我不知道该怎么办。
有没有人有想法？谢谢！

我的测试博客的 URL 是
http://trisssinator.blogspot.se/

Rajender

# 2015 年 11 月 29 日

嗨，文本对齐是居中的，但单词左对齐。如何为此添加 CSS。

Sammy

# 2016 年 5 月 7 日

当文本对齐时，它们只是在容器的左侧对齐。如何使它们在两侧对齐（就像我们在 MS-Word 或 Photoshop 中的居中对齐一样）？

Nick

# 2016 年 6 月 14 日

很棒，对于像我这样的 CSS 新手来说，很容易理解。感谢发布！

manabadico

# 2018 年 7 月 11 日

嘿，CSS Tricks 社区，我有一个名为 manabadi 的网站，我想在我的所有 WordPress 文章末尾显示文本对齐，没有任何不规则性，请查看我的文章并提出一些技巧，我的博客 URL
manabadi.co 谢谢

Michael O. Franklin Jr.

# 2019 年 6 月 21 日

它对我来说运行良好，谢谢！在较小的屏幕上，对齐仍然看起来有点奇怪，但它正在发挥作用。

eshwar

# 2019 年 7 月 16 日

在 IE-11 版本中，居中对齐不起作用，有人能帮我吗？顺便说一下，我尝试过以下样式。

text-align: -moz-center;
text-align: -webkit-center;
margin: 0 auto;

Sita

# 2020 年 12 月 31 日

我无法在我的区块中对齐文本。
在额外的 CSS 中，我添加了以下行

#selector {
text-align:justify;
}

但它不起作用，我做错什么了？

Sita

评论永久链接# 2020 年 12 月 31 日

我也尝试过这个

.align-justified {
text-align: justify!important;
}

也不起作用。
Emin Altan

评论永久链接# 2023 年 2 月 8 日

!important 关键字必须与空格分隔，尝试使用：

#selector{
text-align:justify !important;
}

如果你使用以下方法，请查看特异性级和层叠

#selector{
text-align:justify;
}

示例

其他资源

相关属性

浏览器支持

评论

发表评论 取消回复

发表评论取消回复