← 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 时显现:前者随之镜像,后者不动。

1 · text-align 的逻辑值

图 1-1 · text-align: starttext-align: left 的并排对照。切换 writing-modedirection,前者跟随 inline 轴的起始侧,后者恒定贴左。

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 是非标准值,Chrome 亦不支持。表格标题目前只能写 top / bottom,且它们是否随表格的 writing-mode 转向也依实现而异——Firefox 42 起按表格的书写模式解析,Chrome 与 Safari 仍按物理方向(核对于 2026-08)。

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