时间戳

首页 > 解决方案 > CSS 标题不居中

css - CSS 标题不居中

问题描述

我为单词“OUTDOOR”和“IS WHERE LIFE HAPPENS”添加了字母间距，如下所示，它们有点不均匀。我试图添加填充，但没有工作如何解决这个问题？图片

<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;
}

图片中的网站是在 udemy 上的Advanced CSS 和 SASS课程中制作的。归功于乔纳斯·施梅特曼

标签： css

解决方案

在 .heading-primary--main ：

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

在 .heading-primary--sub 中：

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

推荐阅读