Question

我为单词＆＃34; OUTDOOR＆＃34;添加了字母间距。和“＃34;生活在哪里”，他们只是有点不平衡，你可以在下面看到。我试图添加填充但是没有工作如何解决这个问题？ Image

<body>

    <header class="header">

        <div class="header__logo-box">

            <img src="img/logo-white.png" alt="logo" class="header__logo">

        </div><!-- .logo-box --->

        <div class="header__text-box">

            <h1 class="heading-primary">

                <span class="heading-primary--main">OUTDOORS</span>
                <span class="heading-primary--sub">IS WHERE LIFE HAPPENS</span>

            </h1>

            <a href="#" class="btn btn--white btn--animate"><span>DISCOVER OUR TOURS</span> </a>

        </div><!-- .text-box -->

    </header><!-- .header -->

</body>



html{
    font-size: 62.5%;
}

.header__text-box{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

h1.heading-primary{
    color: #fff;
    text-align: center;
    backface-visibility: hidden;
    margin-bottom: 6rem;
}

.heading-primary--main{
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    animation: moveInLeft 1s;
}

.heading-primary--sub{
    display: block;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1.75rem;
    animation: moveInRight 1s;
}

图片中的网站是在Advanced CSS and SASS的udemy课程中制作的。感谢Jonas Schmedtmann

Answer 1

in .heading-primary - main：

letter-spacing: 3.5rem;
text-indent: 3.5rem;

和.heading-primary - sub：

letter-spacing: 1.6rem;
text-indent: 1.6rem;

CSS标题不居中

1 个答案: