html - h1 具有 3 种不同的文本对齐属性

Question

我正在尝试使用 <br> 将一个 h1 标签分为 3 行不同的行并且有不同的text-align特性。

h1 {
  position: relative;
}

h1 #first {
  text-align: left;
}

h1 #second {
  text-align: center;
}

h1 #third {
  text-align: right;
}

<h1><span id="first">First</span><br><span id="second">Middle</span><br><span id="third">Last</span></h1>

使用绝对值是可行的，但我想知道是否有更有效的方法。

Answer 1

使用 flex 属性。非常简单、干净、高效。

h1 {
  display: flex;
  flex-direction: column;
}

#first {
  align-self: flex-start;
}

#second {
  align-self: center;
}

#third {
  align-self: flex-end;
}

<h1>
  <span id="first">First</span>
  <span id="second">Middle</span>
  <span id="third">Last</span>
</h1>