text-align:start与unset、initial的差异及不同对齐场景探究

咱们先把这两个属性的核心区别掰扯清楚：

• text-align:initial 的作用是让元素回归浏览器对该元素预设的默认text-align值——不同元素的默认值可能不一样哦。
• text-align:start 是个“聪明”的逻辑对齐值，它会跟着当前元素的文本方向（direction）、书写模式（writing-mode）自动调整，对齐到文本流的起始端。

下面这几个场景，二者的表现会明显不同：

1. 从右到左（RTL）文本方向场景 #

比如在阿拉伯语、希伯来语这类从右到左阅读的场景中，我们会给容器设置direction: rtl：

• text-align:initial 会老老实实沿用浏览器对块级元素的默认对齐——大多是left（物理左对齐）。
• text-align:start 则会适配RTL方向，自动对齐到容器的右侧（也就是文本流的起始端）。

看个实际例子：

.rtl-box {
  direction: rtl;
  width: 300px;
  border: 1px solid #eee;
  padding: 8px;
  margin: 10px 0;
}
.initial-align { text-align: initial; }
.start-align { text-align: start; }

<div class="rtl-box">
  <p class="initial-align">我是initial对齐的文本</p>
  <p class="start-align">我是start对齐的文本</p>
</div>

效果一目了然：initial的文本靠左，start的文本靠右。

2. 垂直书写模式场景 #

在东亚语言竖排的场景中，我们会用到writing-mode: vertical-rl（垂直从右到左）或vertical-lr（垂直从左到右）：

• text-align:initial 还是会用默认的水平对齐值（通常是left），在垂直模式下会表现为文本靠上/某一侧的固定对齐，完全不考虑书写方向。
• text-align:start 则会跟着垂直书写的起始端走，比如vertical-rl下会对齐到容器的右侧（竖排文本的起始位置），逻辑上更符合阅读习惯。

3. 特定表单元素的默认样式差异 #

有些表单元素的浏览器默认对齐就不是start，比如：

• <input type="number">：多数浏览器默认是右对齐（方便数字排版）。
• <input type="tel">：部分浏览器也会默认右对齐。

这时候差异就很明显了：

• text-align:initial 会继承该元素的默认值（比如右对齐）。
• text-align:start 在LTR（从左到右）的默认文本方向下，会对齐到左侧。

示例代码：

input {
  width: 220px;
  padding: 6px;
  margin: 8px 0;
}
.initial-input { text-align: initial; }
.start-input { text-align: start; }

<input type="number" class="initial-input" placeholder="initial 对齐">
<input type="number" class="start-input" placeholder="start 对齐">

效果：initial的输入框数字靠右，start的输入框内容靠左。

一句话总结 #

initial是“跟着浏览器给这个元素的默认设置走”，而start是“跟着当前文本流的起始方向走”。只有当浏览器默认值恰好和start对应的物理方向一致时，二者才会表现相同；一旦文本方向、书写模式变了，或者元素本身默认对齐就不是start，差异立刻显现。

内容的提问来源于stack exchange，提问作者R River