CSS标题未居中
CSS标题未居中
提问于 2018-06-05 07:51:18
我为单词“户外”和“生活发生的地方”添加了字母间距，正如你在下面看到的，它们有点不均匀。我试着添加填充，但不起作用，我该如何解决这个问题？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;
}图片中的网站是在udemy上的Advanced CSS and SASS课程中制作的。归功于Jonas Schmedtmann
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 08:02:15
在.heading-primary--main中：
letter-spacing: 3.5rem;
text-indent: 3.5rem;
在.heading-primary--sub中：
letter-spacing: 1.6rem;
text-indent: 1.6rem;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690236
复制相关文章
相似问题
腾讯云开发者
