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属性。非常简单，干净，高效。

＆＃13;

h1 {
  display: flex;
  flex-direction: column;
}

#first {
  align-self: flex-start;
}

#second {
  align-self: center;
}

#third {
  align-self: flex-end;
}

＆＃13;

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

＆＃13;

Answer 2

添加此CSS。

h1 span{
    display:block;
}

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

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

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

2 个答案: