CSS文本对齐[编辑 | 编辑源代码]

CSS文本对齐（Text Alignment）是控制文本在容器中水平分布方式的CSS属性集合。这些属性允许开发者精确控制文本的排版效果，从简单的左对齐到复杂的两端对齐分布。

基本对齐属性[编辑 | 编辑源代码]

CSS主要通过text-align属性控制文本对齐方式，包含以下常用值：

/* 基础对齐示例 */
.container {
  text-align: left;    /* 左对齐（默认值） */
  text-align: right;   /* 右对齐 */
  text-align: center;  /* 居中对齐 */
  text-align: justify; /* 两端对齐 */
}

对齐效果对比[编辑 | 编辑源代码]

详细属性说明[编辑 | 编辑源代码]

text-align[编辑 | 编辑源代码]

主属性，影响行内内容（包括文本和行内元素）的水平对齐方式。

值	描述	数学表示
`left`	文本与容器左边缘对齐	$start = x_{min}$
`right`	文本与容器右边缘对齐	$end = x_{max}$
`center`	文本中心与容器中心对齐	$center = \frac{x_{max} - x_{min}}{2}$
`justify`	调整单词间距使文本填满整行（最后一行除外）	$Δ w = \frac{L - \sum w_{i}}{n - 1}$

国际书写方向支持[编辑 | 编辑源代码]

CSS3新增了逻辑属性值，适应不同书写方向：

.multilingual {
  text-align: start;  /* 根据书写方向自动适配 */
  text-align: end;    /* 根据书写方向自动适配 */
}

实际应用案例[编辑 | 编辑源代码]

新闻排版[编辑 | 编辑源代码]

两端对齐常用于报纸风格的排版：

.news-column {
  text-align: justify;
  hyphens: auto;      /* 启用自动连字符 */
  column-width: 300px; /* 多列布局 */
}

表单标签对齐[编辑 | 编辑源代码]

右对齐提升表单可读性：

<form class="labeled-form">
  <label style="text-align: right; width: 120px;">用户名：</label>
  <input type="text">
</form>

高级技巧[编辑 | 编辑源代码]

最后一行对齐控制[编辑 | 编辑源代码]

使用text-align-last单独控制最后一行：

.justified-paragraph {
  text-align: justify;
  text-align-last: center; /* 最后一行居中对齐 */
}

对齐与伪元素结合[编辑 | 编辑源代码]

创建装饰性标题效果：

.fancy-heading {
  text-align: center;
}
.fancy-heading::after {
  content: "";
  display: block;
  width: 50%;
  margin: 0 auto;
  border-top: 2px solid gold;
}

浏览器兼容性[编辑 | 编辑源代码]

大多数现代浏览器完全支持text-align属性，但需注意：

IE8+ 支持基本值
start/end 需要现代浏览器
text-align-last 在Firefox中需要-moz-前缀

最佳实践[编辑 | 编辑源代码]

1. 正文文本推荐使用左对齐（LTR语言）或两端对齐 2. 标题类文本可考虑使用居中对齐 3. 数字列建议右对齐便于数值比较 4. 多语言网站优先使用逻辑值start/end