帶空格的居中文本：nowrap；

Question

我試圖將我的標題居中，所以我使用了white-space: nowrap; 所以它沒有堆疊並且出現在一行中但現在它不會居中。 所以標題的代碼是 CSS，它的外觀很好，唯一的問題是，它不是居中顯示，而是從中心開始，一直向右走。 所以就像，而不是“Meet The Seekers”，它確實是“Meet the Seekers”

我的代碼片段是：

 .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

只需使用文本對齊：居中

 .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>