CSS text-align 属性

CSS text-align 属性

CSS text-align 属性用于指定一个元素内部文本内容的水平对齐方式。该属性可用于块级元素和表格单元格。

属性值

text-align 属性可接受以下值：

  • left：文本内容向左对齐。
  • right：文本内容向右对齐。
  • center：文本内容居中对齐。
  • justify：文本内容两端对齐，同时以自然宽度增加间隔。

使用示例

水平居中对齐

.center {
    text-align: center;
}

左对齐

.left {
    text-align: left;
}

右对齐

.right {
    text-align: right;
}

两端对齐

.justify {
    text-align: justify;
}

注意事项

  • text-align 属性并不改变元素中的块级内容，仅改变其在元素内的对齐方式。
  • 若指定元素为行内元素，则 text-align 属性不起作用，需使用其父元素 align 属性或 display 属性设置为 block 才能生效。
  • 若指定元素中包含表格，则 text-align 属性可应用于单元格（td 或 th）：
    • text-align 属性可设置在表格单元格上，以指定单元格中内容的水平对齐方式，但是不会影响表格中的其他单元格。
    • 若要想让表格中所有单元格的文本内容水平居中，可设置表格的 text-align 属性为 center。
  • text-align 属性只会影响其父元素中的文本内容，不会影响其子元素或后代元素，如需对其作用的所有后代元素生效，则需使用文本块容器。

应用场景

text-align 属性可用于以下情景：

  • 文本块：适用于对段落、标题、列表等文本块进行水平对齐。
  • 表格单元格：适用于对表格单元格中的文本内容进行水平对齐。

兼容性

text-align 属性可在所有主流浏览器中使用，包括 IE6 及以上版本。

CSS table-layout 属性 CSS text-align-last 属性