如何在內容保持居中狀態之前縮小間距

Question

我想保持內容居中，並先用盡多余的空間
我嘗試使用百分比寬度，這可以幫助我居中，但空格始終存在

實現它的理想方法是什么？ 我希望最終結果像這樣Oapletwo.com

 .wrapper { width: 1140px; margin: auto; border-left: 1.5px solid rgba(255, 0, 0, 0.11); border-right: 1.5px solid rgba(255, 0, 0, 0.11); } h1 { width: fit-content; margin: auto; text-transform: uppercase; } 

 <div class="wrapper"> <div class="brand"> <h1>PaymoNeer</h1> </div> </div> 

Answer 1

您可以使用text-align: center; 為您的.brands div

 .wrapper { width: 1140px; margin: auto; border-left: 1.5px solid rgba(255, 0, 0, 0.11); border-right: 1.5px solid rgba(255, 0, 0, 0.11); } .brand { text-align: center; } h1 { margin: auto; text-transform: uppercase; } 

 <div class="wrapper"> <div class="brand"> <h1>PaymoNeer</h1> </div> </div> 

Answer 2

使用text-align:center; 並調整內容的填充

Answer 3

只需在.wrapper元素上使用text-align: center ，並在.brand div上display: inline-block和margin: 0 auto即可使其居中。

 .wrapper { text-align: center; border-left: 1.5px solid rgba(255, 0, 0, 0.11); border-right: 1.5px solid rgba(255, 0, 0, 0.11); } .brand { display: inline-block; margin: 0 auto; } h1 { text-transform: uppercase; } 

 <div class="wrapper"> <div class="brand"> <h1>PaymoNeer</h1> </div> </div>