CSS的text-align属性怎么设置文本对齐方式？

text-align属性用于控制块级元素内行内内容的水平对齐方式，其作用对象为文本、图片及inline-block元素。主要值包括left（左对齐，默认）、right（右对齐）、center（居中对齐）和justify（两端对齐，最后一行除外）。需要注意的是，它仅影响行内内容，不能用于对齐块级元素自身；要实现块级元素居中，需使用margin: 0 auto或flexbox/ grid布局 。此外，text-align对图片和inline-block元素有效，因为它们被视为行内内容。当使用justify时，最后一行默认不会两端对齐，这是规范定义，若强制对齐可通过text-align-last等方法实现，但可能影响阅读体验。与flexbox/grid相比，text-align专注于文本流的水平对齐，而flexbox/grid提供更全面的布局能力，支持水平与垂直方向的对齐及空间分布，适用于复杂布局场景。 属性在CSS里主要就是用来控制行内内容（比如文本、图片）在其块级父元素内部的水平对齐方式。你可以把它想象成在Word里选中一段文字，然后点左对齐、居中、右对齐的那个按钮，只不过在CSS里，它作用的对象是元素内部的文本流。 要设置文本对齐，你直接在目标元素的CSS规则里加上 属性就行。它有几个常用值： : 文本左对齐。这是大多数 浏览器 的默认值，除非你改了其他东西。 : 文本右对齐。 : 文本居中对齐。 : 文本两端对齐。这个值会通过调整单词间距来让文本的左右边缘都对齐，除了最后一行。 举个例子： 如果你想让一个段落里的文字居中，你可以这么写： 要是想让一个 里面的所有文本和图片都右对齐： 立即学习 “ 前端免费学习笔记（深入） ”； 需要注意的是， 属性只作用于 行内内容 。它不会影响块级元素自身的对齐，比如一个 盒子本身在页面上的位置。如果你想让一个块级元素居中，那通常需要设置其左右外边距为 （ ），或者使用Flexbox/Grid布局。我刚开始学CSS的时候，就经常搞混这个，以为 能把整个 挪到中间，结果发现根本没用，文本倒是居中了，但盒子还是老样子，卡在左边。那会儿真是挠头。 对图片和行内块元素也有效吗？ 是的， 属性对图片（ ）和行内块元素（ ）同样有效。这是因为这些元素虽然有自己的尺寸，但它们在文本流中仍然被当作是“行内内容”来处理。当一个块级容器设置了 时，它里面的图片或者 的 就会跟着居中。 比如，你有一个 里面放了几张图片，想让它们在 里水平居中 排列 ： 对应的CSS可以这么写： 这里 本身默认就是 或 ，所以 能直接作用。如果是一些自定义的 或者 ，如果你想用 来对齐它们，记得把它们的 属性设置为 。否则，它们是块级元素， 对它们自身没用，只会影响它们内部的文本。这其实是个挺常见的小坑，很多人会忽略这一点。 Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 为什么我的 没有完全两端对齐？ 这个值确实有点“脾气”。它旨在让文本的左右边缘都对齐，通过动态调整单词间的间距来实现。但它有个非常重要的特性： 最后一行通常不会被两端对齐 。这是W3C规范里就这么定义的，因为如果最后一行也强制两端对齐，在内容不足以填满一行时，单词之间的间距可能会变得非常大，看起来会非常奇怪和不自然。 所以，当你看到一段使用了 的文本，只有第一行到倒数第二行是两端对齐的，最后一行保持默认的左对齐（或者根据 属性来）。这并不是你的CSS写错了，而是它的正常行为。 当然，如果你真的有特殊需求，非要让最后一行也两端对齐，那就有一些“黑科技”或者说变通的方法。比如，你可以给文本的父元素设置 ，但这个属性的浏览器兼容性需要注意，而且在某些情况下可能会导致排版问题。还有一种比较hacky的做法是，在文本末尾添加一个宽度为100%的伪元素，并设置为 ，但这会增加HTML结构的复杂性，而且可能带来其他布局上的副作用。我个人觉得，在绝大多数情况下，遵循 的默认行为是最好的选择，毕竟它的设计初衷就是为了阅读体验。过度追求“完美”的两端对齐，有时候反而会适得其反。 和Flexbox/Grid布局中的对齐有什么区别？ 这是一个非常好的问题，也常常是新手容易混淆的地方。 是一个比较“传统”的CSS属性，它主要关注的是 行内内容在块级父元素内部的水平对齐 。它操作的是文本流层面的对齐，就像水流一样，它让水流中的小石子（文本、图片）在河道（块级元素）里靠左、靠右或居中。 而Flexbox（弹性盒子）和Grid（网格布局）是现代CSS中强大的布局模块，它们关注的则是 块级元素之间以及它们内部项的对齐和排列 。它们提供了更高级、更灵活的控制能力，不仅仅是水平对齐，还包括垂直对齐、间距分配、顺序调整等等。 主要区别可以这么理解： 作用对象不同： 作用于 行内内容 （文本、图片、 元素）。Flexbox/Grid作用于 子项（Flex Items/Grid Items） ，这些子项通常是块级元素。 控制粒度不同： 只能控制水平方向的对齐。Flexbox/Grid提供了 （主轴对齐）、 （交叉轴对齐）、 （多行/列对齐）等属性，可以同时控制水平和垂直方向的对齐，以及子项之间的空间分布。 适用场景不同： 如果你只是想让一段文字或几张图片在容器里居中， 是快速简单的选择。但如果你需要构建复杂的页面布局，比如导航栏、卡片列表、响应式网格等，Flexbox和Grid才是你的首选工具。 举个例子，如果你想让一个 盒子本身在页面上水平居中，你不能用 。你应该这样做： 或者，如果父元素是Flex容器： 总的来说， 是处理“文本流”的工具，而Flexbox/Grid是处理“盒子模型”和“空间分布”的工具。它们各司其职，在不同的层面上解决对齐问题。了解它们的边界和各自的优势，能让你在前端布局时少走很多弯路。我个人觉得，理解了这一点，CSS布局的很多困惑都能迎刃而解。