CSS 的text-align属性是控制文本水平对齐的核心仅需一行代码就能实现左对齐、居中、右对齐、两端对齐等效果是网页排版中最常用的样式之一。本文结合极简实战代码详解text-align的核心用法。一、text-align 核心代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS文本对齐实战/title style /* 基础居中对齐 */ .center { text-align: center; } /* 左对齐默认 */ .left { text-align: left; } /* 右对齐 */ .right { text-align: right; } /* 两端对齐长文本适用 */ .justify { text-align: justify; width: 300px; /* 固定宽度更易看出效果 */ } /style /head body p classcenter这是居中对齐的文字标题/按钮文字常用/p p classleft这是左对齐的文字网页正文默认样式/p p classright这是右对齐的文字日期/金额常用/p p classjustify这是两端对齐的文字长文本使用两端对齐会让排版更整齐左右边缘都紧贴容器边界。这是两端对齐的文字长文本使用两端对齐会让排版更整齐。/p /body /html二、text-align 核心取值说明属性值效果说明适用场景left文本左对齐默认值网页正文、普通段落center文本居中对齐标题、按钮文字、页面核心提示语right文本右对齐日期、金额、表单右侧备注justify文本两端对齐拉伸文本使左右边缘对齐长文本段落、新闻 / 文章正文三、关键注意事项作用范围text-align作用于块级元素如 p、div、h1-h6控制其内部行内元素 / 文本的对齐对块级子元素无效两端对齐生效条件justify仅在文本超过一行时生效单行文本看不出效果示例中给.justify设置固定宽度便于演示继承特性子元素会继承父元素的text-align样式如需单独调整给子元素重新赋值即可。总结text-align是控制文本水平对齐的核心属性核心取值为 left/center/right/justify居中对齐center适合标题左对齐left是正文默认样式两端对齐justify适合长文本排版text-align作用于块级元素控制其内部文本 / 行内元素的对齐方式。