html - 如何将两种不同字体大小的文本放在网页的中心？

Question

这是我的 HTML 代码：

    span {
      font-family: 'Lovehearts XYZ';
      text-align: center;
    }


    @font-face {
        font-family: 'Lovehearts XYZ';
        src: url('LoveheartsXYZ.woff2') format('woff2'),
            url('LoveheartsXYZ.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    <span style = "font-size: 70px;">Hi, I am *Name*</span></br>
            <span style = "font-size: 40px;">*Occupation*</br>
            *Hobbies*</br>
            *Facts about me*
    </span>

如您所见，我使用了两个“跨度”，但它们的字体大小不同。我希望将这段文本放在网页的中心。我该如何修改代码来做到这一点？

标签： htmlcss

Answer 1

span {
            font-family: 'Lovehearts XYZ';
            display:block;
            text-align: center;
        }

<span style = "font-size: 70px;">Hi, I am *Name*</span></br>
        <span style = "font-size: 40px;">*Occupation*</br>
        *Hobbies*</br>
        *Facts about me*</span>

span {
            font-family: 'Lovehearts XYZ';
            text-align: center;
        }