文本居中，使用空格:nowrap;

Question

我试图居中我的标题，所以我使用white-space: nowrap;，所以它没有堆叠，它出现在一行，但现在它不会居中。这是标题的CSS代码，它的外观很好，唯一的问题是，它不是显示居中，而是从中心开始，一直向右。比如，不用"《遇见探索者》确实如此。遇见探索者">

我的代码片段是:

.section-title {
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
justify-content: center;
}

<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>

Answer 1

我不知道为什么你的代码中有justify-content: center，因为它没有做任何事情。你也不需要inline-block，因为span标签不是块元素。

您可以删除display属性并添加text-align: center，因此它将居中您的h1标签。

.section-title {
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
text-align: center;
}

<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>

Answer 2

使用text-align:center

.section-title {

font-weight: 300;
color: black;
margin:0 auto;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
text-align:center;



}

<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was 
time to modernize the way we search the web. A diverse group 
of unexpected talents came together to make SEE-Tool available 
to every web user.</p>
</div>