如何以不同方式对齐同一标签中的文本？

Question

所以我在 h2 标签之间有一些文本，我基本上希望整个 h2 标签都位于页面的中央。但我还想在第二行添加一些文字，即右对齐。

所以它看起来像这样：

Answer 1

您可以使用已定义的 class.

尝试标记或浮动属性

Answer 2

通过添加以下语法：

.class_name tag_name

Answer 3

您可以使用 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>

备注：

块级容器；使 h2 space 水平居中。
使 h2 成为行内级容器，因此框的宽度仅与内容一样宽。这允许第一行和第二行右对齐。
第二行右对齐。

替代方法，使用绝对定位，根据评论反馈：

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>

如何以不同方式对齐同一标签中的文本？

How can I align text in the same tag differently?

html

css

text

text-align

center