text-align 的 left、center、right、justify 四个值作用于行内内容而非块元素，justify 仅对多行文本除末行外生效，单行需配合 text-align-last: justify；国际化应优先用 start/end；其为继承属性，影响所有后代行内内容。
text-align 的 left、center、right、justify 四个值看似简单，但实际用错的地方远比想象中多——尤其是 justify，它根本不会让单行文本两端对齐，也不处理最后一行。
text-align 不作用于块元素本身，只对内部行内内容生效
很多人写 <div style="text-align: center;"><div>我居中了吗？</div></div>，发现子 <div> 没动。这是因为 <code>text-align 只影响行内级内容（如文字、<span></span>、<img>、display: inline-block 元素），对块级子元素无效。
- 要让块级子元素居中，得用
margin: 0 auto或 Flex 布局 - 若想让图片居中，确保它没被设成
display: block（否则会独占一行，text-align仍对其父容器内的“行框”起作用，但视觉上就是居中了） - 中文段落里混有
inline-block按钮时，text-align: right会让按钮贴右，文字也右对齐——这是预期行为
justify 在单行或短文本中基本不生效
浏览器实现 text-align: justify 的逻辑是：在**多行文本中，除最后一行外**，通过拉伸单词/字符间空白实现两端对齐。所以：
- 一段只有 1 行的
<p>你好</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>加text-align: justify，完全看不出变化 - Firefox 对中文处理更严格：两字之间若无空格（如“你好”），即使多行也不会 justify；加一个全角空格“你 好”，才可能触发
- 真正想让单行两端对齐，得配合
text-align-last: justify，但注意 Safari 旧版本不支持该属性 - 表格中数字列用
justify容易导致小数点错位，不如直接用text-align: right
left / right / center 的方向敏感性常被忽略
text-align: left 并不总是“靠左”，它本质是“沿文本方向的起始侧”。在 dir="rtl"（如阿拉伯语）页面中，left 实际表现是右对齐。
- 国际化项目建议优先使用
start和end值：text-align: start自动匹配当前语言的起始边 -
center看似安全，但在 RTL 页面中仍以容器中心为基准，不是“按文字方向居中”，一般没问题 - 纯数字字段（如金额、ID）用
right更符合阅读习惯，但需确认父容器宽度固定，否则可能溢出
justify 的排版副作用和兼容性底线
启用 justify 后，浏览器会调整字间距或词间距，可能导致中英文混排时汉字被过度撑开、标点孤立在行尾等问题。
- CSS 中可加
hyphens: auto辅助断词，但中文支持有限；更可控的方式是用word-break: break-word配合 - 移动端 Safari 对
justify渲染较弱，长段落可能出现首行缩进丢失或末行突兀左对齐 - 如果设计稿明确要求“每行都两端对齐”，
text-align: justify+text-align-last: justify是必须组合，且要测试 Chrome/Firefox/Safari 三端渲染差异
最常被漏掉的一点：text-align 是继承属性，父元素设了 center，所有后代行内内容都会受影响——包括按钮里的文字、表单输入框的 placeholder，调试时得一层层查 computed styles 而不是只看本层样式。
