CSS中的text-align属性详解

描述
text-align是CSS中用于控制文本水平对齐方式的属性。它主要作用于块级元素内的行内内容（包括文本、图片等）的对齐方式。这个属性看似简单，但在实际使用中有一些容易被忽略的细节和特性。

基本对齐方式

text-align有四个基本值：

• left：左对齐（默认值，从左到右阅读的语言如中文、英文）
• right：右对齐（从右到左阅读的语言如阿拉伯语、希伯来语）
• center：居中对齐
• justify：两端对齐（使文本同时对齐左右两边）

示例演示

.container {
  width: 300px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.left-align { text-align: left; }
.right-align { text-align: right; }
.center-align { text-align: center; }
.justify-align { text-align: justify; }

text-align: justify的细节

两端对齐有一些特殊行为需要了解：

1. 最后一行文本不会强制两端对齐
2. 需要通过其他方式控制最后一行（如添加<br>或使用CSS伪元素）
3. 在单行文本中，justify效果与left相同

text-align-last属性
为了解决justify最后一行的问题，可以使用text-align-last：

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

继承特性
text-align属性具有继承性，父元素设置的对齐方式会影响所有子元素：

.parent {
  text-align: center; /* 所有子元素都会继承这个对齐方式 */
}
.child {
  /* 除非显式重写，否则会继承父元素的text-align值 */
}

对行内块元素的影响
text-align不仅影响文本，还影响行内块元素（inline-block）：

.container {
  text-align: center; /* 内部的inline-block元素也会居中 */
}
.image {
  display: inline-block;
  width: 100px;
}

全局值
text-align还支持两个全局值：

• inherit：继承父元素的值
• initial：重置为初始值（通常是left）

实际应用技巧

1. 图片居中：

.image-container {
  text-align: center; /* 使内部的img标签居中 */
}

2. 表单元素对齐：

.form-group {
  text-align: right; /* 标签右对齐 */
}

3. 响应式文本对齐：

@media (max-width: 768px) {
  .content {
    text-align: justify; /* 在小屏幕上使用两端对齐提高可读性 */
  }
}

注意事项

• text-align只对块级元素有效
• 对绝对定位的元素无效
• 不同浏览器对justify的支持可能略有差异
• 在表格单元格中，text-align控制单元格内容的对齐方式

通过理解这些细节，你可以更精确地控制网页中文本和其他行内内容的水平对齐方式。