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

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

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>

Answer 2

添加此 CSS。

h1 span{
    display:block;
}

span 是内联元素。所以 text-align 不起作用，因为它没有占用容器的全宽。

或将 id 添加到 h1 标记并从 span 中删除。那么它会正常工作