如何以不同的方式對齊相同標記中的文字？

Question

所以我有一些文字介於h2標籤之間，我基本上希望整個h2標籤位於頁面的中心位置。但是我也想在第二行寫一些文字，這是對齊的。

因此，這將是這個樣子：

Answer 1

您可以使用CSS Flexbox的一個乾淨和簡單的解決方案。

main {       /* 1 */ 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
h2 { 
 
    display: inline-flex;   /* 2 */ 
 
    flex-direction: column; 
 
    align-items: center; 
 
    margin: 0; 
 
} 
 

 
h2>span { 
 
    margin-left: auto;   /* 3 */ 
 
}

<main> 
 
    <h2> 
 
    WebsiteName<span>.com</span> 
 
    </h2> 
 
</main>

注：

1. 塊級容器;給予h2空間水平居中。
2. 使h2成爲內聯級容器，因此該框只與內容一樣寬。這允許第一行和第二行對齊。
3. 將第二行對齊到右側。

---

替代方法，使用絕對定位，基於意見反饋：

h2 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    margin: 0; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
h2>span { 
 
    margin-left: auto; 
 
}

<h2> 
 
    WebsiteName<span>.com</span> 
 
</h2>

Answer 2

您可以嘗試的標籤或定義類的float屬性。

Answer 3

通過添加以下語法：

.class_name tag_name