如何以不同的方式对齐相同标记中的文字？

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