文本与对齐:text-align / float 的逻辑值
前几节的逻辑化手段是新增一套属性;另有一类属性不必新增,只给原有属性补充逻辑值。text-align: start | end 由 CSS Text 定义,早于逻辑属性模块,各浏览器很早即支持;float / clear 的 inline-start / inline-end 则是 css-logical-1 追加的逻辑值,Firefox
55、Safari 15、Chrome 118 起可用(核对于 2026-08)。翻转 direction 时只有逻辑值随之镜像。但不能由此认为物理值「不动」——text-align 与 float 的 left / right 是 line-relative 的,它们指的是行盒的 line-left / line-right,切换
writing-mode 时同样会挪窝:实测 Chrome 151,vertical-rl 下 text-align: left 把文字放到顶部、right 放到底部,sideways-lr 下两者再对调(核对于 2026-08)。
1 · text-align 的逻辑值
text-align: start 与 text-align: left 的并排对照。切换 writing-mode 与 direction:前者跟随 inline 轴的起始侧,后者跟随行盒的 line-left 侧——竖排下两者可能落在同一处。2 · float 的逻辑值
float: inline-start 与 float: left 的并排对照。切换书写方向观察浮标贴向哪一侧,以及正文从哪一侧绕排。居中的逻辑写法。 margin-inline: auto 让块沿 inline 轴居中,横排下等价于 margin-left: auto; margin-right: auto,竖排下则变为垂直居中。前提是该轴上的尺寸确定:inline-size 为 auto 时 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 系列。