css文字对齐方式怎么设置_利用text align控制

text-align用于控制块级元素内行内内容的水平对齐方式,不控制元素自身位置;取值包括left(默认)、right、center、justify;具有继承性,但对块级子元素无效;需注意direction和writing-mode对其含义的影响。

文字对齐用 text-align 属性设置,作用于块级元素内部的行内内容(如文字、图片、行内标签)。 它不控制元素自身在父容器中的位置,而是控制该元素里文字的水平排列方式。

常用取值及效果

在 CSS 中给块级元素(如 divph1 等)设置 text-align 即可生效:

  • text-align: left; —— 文字左对齐(默认值)
  • text-align: right; —— 文字右对齐
  • text-align: center; —— 文字居中对齐
  • text-align: justify; —— 两端对齐(最后一行除外,按浏览器默认处理)

注意作用对象和继承性

text-align 是可继承属性。如果给父容器设为 center,子元素里的文字也会居中,除非子元素显式重写该值。

它只对行内内容起作用,对块级子元素无效(比如 div 不会因父text-align: center 而居中,需用 margin: 0 auto 或 Flex 布局)。

配合 direction 和 writing-mode 使用

当页面含多语言(如阿拉伯语、希伯来语)时,direction: rtl 会影响 text-align 的含义:此时 left 表示“右端”,right 表示“左端”。

垂直排版(writing-mode: vertical-rl)下,text-align 控制的是文字在垂直方向上的“横向”对齐,即控制每行文字在列内的左右位置(实际表现为上下对齐效果)。

常见误区提醒

  • 别用 text-align 居中一个 div —— 这是初学者高频错误,应改用 display: flexmargin: 0 auto
  • justify 在中文段落中效果有限,因汉字等宽且少空格,浏览器难以合理断词拉伸;英文或混合排版更适用
  • 表格单元格(tdth)默认有 text-align: left,可单独覆盖