CSS 与布局 / CSS 逻辑属性 · Logical Properties / 文本与对齐:text-align / float 的逻辑值 待审核 5 / 5
flow · 文本与对齐

文本与对齐:text-align / float 的逻辑值

前几节的逻辑化手段是新增一套属性;另有一类属性不必新增,只给原有属性补充逻辑值。text-align: start | end 由 CSS Text 定义,早于逻辑属性模块,各浏览器很早即支持;float / clearinline-start / inline-end 则是 css-logical-1 追加的逻辑值,Firefox 55、Safari 15、Chrome 118 起可用(核对于 2026-08)。翻转 direction 时只有逻辑值随之镜像。但不能由此认为物理值「不动」——text-alignfloatleft / rightline-relative 的,它们指的是行盒的 line-left / line-right,切换 writing-mode 时同样会挪窝:实测 Chrome 151,vertical-rltext-align: left 把文字放到顶部right 放到底部sideways-lr 下两者再对调(核对于 2026-08)。

1 · text-align 的逻辑值

图 1-1 · text-align: starttext-align: left 的并排对照。切换 writing-modedirection:前者跟随 inline 轴的起始侧,后者跟随行盒的 line-left 侧——竖排下两者可能落在同一处。

2 · float 的逻辑值

图 2-1 · float: inline-startfloat: left 的并排对照。切换书写方向观察浮标贴向哪一侧,以及正文从哪一侧绕排。

居中的逻辑写法。 margin-inline: auto 让块沿 inline 轴居中,横排下等价于 margin-left: auto; margin-right: auto,竖排下则变为垂直居中。前提是该轴上的尺寸确定:inline-sizeauto 时 auto margin 计算为 0,不产生居中效果。

caption-side 的逻辑值尚不可用。 css-logical-1 为 caption-side 定义了 inline-start / inline-end,至今没有浏览器实现;left / right 是非标准值,Firefox 与 Safari 支持而 Chrome 不支持(核对于 2026-08)。表格标题目前只能写 top / bottom,且它们是否随表格的 writing-mode 转向也依实现而异——Firefox 42 起按表格的书写模式解析,Chrome 与 Safari 仍按物理方向(核对于 2026-08)。

Flexbox 与 Grid 的坐标系本身就是逻辑的。 flex-direction: row 沿 inline 轴、column 沿 block 轴,随书写模式定向,换书写方向不必改布局代码。但对齐关键字分属四类,边界不同:start / end 参照对齐容器的书写模式;self-start / self-end 参照对齐对象自身的书写模式;flex-start / flex-end 是 flex 相对的,除书写模式外还随 row-reverse / column-reverse 翻转;justify-content / justify-self 另接受物理的 left / right,这一类才与书写模式无关。详见 Box Alignment 系列