html - 如何对齐不同字体大小的文本部分

Question

我正在尝试键入一些居中对齐的文本。每个短语都应该有不同的文本大小，尝试与前一个短语具有完全相同的视觉宽度，等等。

这是它必须如何的一个例子:http://soluzionipersuasive.com/img/text.png

我在 CSS 部分使用这段代码:

.a1 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:35px;
    line-height: 1.3em;
    }

.b2 {
    font-family: Alfa Slab One;
    color: #0585c0;
    font-size:40px;
    line-height: 1.3em;
    }

.c3 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:40px;
    line-height: 1.3em;
    }

...以及 html 区域中的另一个:

<span class="a1">Hello <span class="b2">How are you? <span class="c3">All good!</span>

但不幸的是，代码无法正常工作。它只提供正确的文本颜色。每个文本的文本字体和字体大小与第一个相同。不明白为什么。

有什么建议吗？

Answer 1

您可以使用 display flex 并对齐元素中心。它还有助于关闭跨度。

.flex {
  display: flex;
  align-items: center;
}

.a1 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:35px;
    line-height: 1.3em;
    }

.b2 {
    font-family: Alfa Slab One;
    color: #0585c0;
    font-size:40px;
    line-height: 1.3em;
    }

.c3 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:40px;
    line-height: 1.3em;
    }

<div class="flex">
  <span class="a1">Hello</span> 
  <span class="b2">How are you? </span>
  <span class="c3">All good!</span>
</div>

不确定您到底想要什么 - 这也可能是它:

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.a1 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:35px;
    line-height: 1.3em;
    }

.b2 {
    font-family: Alfa Slab One;
    color: #0585c0;
    font-size:40px;
    line-height: 1.3em;
    }

.c3 {
    font-family: Alfa Slab One;
    color: blue;
    font-size:40px;
    line-height: 1.3em;
    }

<div class="flex">
  <span class="a1">Hello</span> 
  <span class="b2">How are you? </span>
  <span class="c3">All good!</span>
</div>