3種類のテキストアライメントプロパティを持つh1

Question

<br>を使用して異なる3つの行に分割され、異なるtext-alignプロパティを持つ1つのh1タグを作成しようとしています。絶対的を使用して

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>

Answer 2

このCSSを追加します。

h1 span{ 
    display:block; 
} 

スパンはインライン要素です。 text-alignは動作しません。なぜなら、それはコンテナの全幅を取っていないからです。

またはidをh1タグに追加し、spanから削除します。