编辑“︁CSS文本对齐”︁

= CSS文本对齐 =

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

== 基本对齐属性 ==

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

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

=== 对齐效果对比 ===
<mermaid>
flowchart LR
    A[左对齐\nleft] -->|文本左侧对齐| B(容器左侧)
    C[右对齐\nright] -->|文本右侧对齐| D(容器右侧)
    E[居中\ncenter] -->|文本中心对齐| F(容器中心线)
    G[两端对齐\njustify] -->|文本均匀分布| H(容器两侧)
</mermaid>

== 详细属性说明 ==

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

{| class="wikitable"
! 值 !! 描述 !! 数学表示
|-
| <code>left</code> || 文本与容器左边缘对齐 || <math>\text{start} = x_{\text{min}}</math>
|-
| <code>right</code> || 文本与容器右边缘对齐 || <math>\text{end} = x_{\text{max}}</math>
|-
| <code>center</code> || 文本中心与容器中心对齐 || <math>\text{center} = \frac{x_{\text{max}} - x_{\text{min}}}{2}</math>
|-
| <code>justify</code> || 调整单词间距使文本填满整行（最后一行除外） || <math>\Delta w = \frac{L - \sum w_i}{n-1}</math>
|}

=== 国际书写方向支持 ===
CSS3新增了逻辑属性值，适应不同书写方向：
<syntaxhighlight lang="css">
.multilingual {
  text-align: start;  /* 根据书写方向自动适配 */
  text-align: end;    /* 根据书写方向自动适配 */
}
</syntaxhighlight>

== 实际应用案例 ==

=== 新闻排版 ===
两端对齐常用于报纸风格的排版：
<syntaxhighlight lang="css">
.news-column {
  text-align: justify;
  hyphens: auto;      /* 启用自动连字符 */
  column-width: 300px; /* 多列布局 */
}
</syntaxhighlight>

=== 表单标签对齐 ===
右对齐提升表单可读性：
<syntaxhighlight lang="html">
<form class="labeled-form">
  <label style="text-align: right; width: 120px;">用户名：</label>
  <input type="text">
</form>
</syntaxhighlight>

== 高级技巧 ==

=== 最后一行对齐控制 ===
使用<code>text-align-last</code>单独控制最后一行：
<syntaxhighlight lang="css">
.justified-paragraph {
  text-align: justify;
  text-align-last: center; /* 最后一行居中对齐 */
}
</syntaxhighlight>

=== 对齐与伪元素结合 ===
创建装饰性标题效果：
<syntaxhighlight lang="css">
.fancy-heading {
  text-align: center;
}
.fancy-heading::after {
  content: "";
  display: block;
  width: 50%;
  margin: 0 auto;
  border-top: 2px solid gold;
}
</syntaxhighlight>

== 浏览器兼容性 ==

大多数现代浏览器完全支持<code>text-align</code>属性，但需注意：
* IE8+ 支持基本值
* <code>start</code>/<code>end</code> 需要现代浏览器
* <code>text-align-last</code> 在Firefox中需要<code>-moz-</code>前缀

== 最佳实践 ==

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

== 相关CSS属性 ==
* <code>vertical-align</code> - 垂直对齐控制
* <code>direction</code> - 文本方向控制
* <code>writing-mode</code> - 书写模式设置

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]