CSS 文本对齐

text-align 属性用于设置文本在元素内的水平对齐方式。

语法

css

text-align: [值];

取值

left：左对齐（默认值，适用于从左到右书写的语言）
right：右对齐
center：居中对齐
justify：两端对齐，使文本均匀分布，左右边缘对齐
justify-all：与 justify 类似，但同时也对齐最后一行
start：对齐到开始边缘（根据书写方向）
end：对齐到结束边缘（根据书写方向）

示例

css

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

.justify-text {
  text-align: justify;
}

.start-align {
  text-align: start;
}

.end-align {
  text-align: end;
}

实际应用

标题居中：通常将页面标题居中对齐
正文对齐：正文内容通常左对齐（或两端对齐）
导航菜单：导航项根据设计需求可以左对齐、右对齐或居中对齐
表单元素：表单标签和输入框的对齐方式
表格内容：表格单元格内文本的对齐方式

最佳实践

考虑可读性：正文内容通常使用左对齐，两端对齐在文本较长时可能导致单词间距过大，影响可读性。
响应式设计：在不同屏幕尺寸下，可能需要调整文本对齐方式。
考虑书写方向：对于从右到左书写的语言（如阿拉伯语、希伯来语），应使用 start/end 代替 left/right，以确保正确的对齐效果。
与其他样式结合：文本对齐应与其他文本样式（如行高、边距）结合使用，以创建良好的视觉层次。