將導航欄的內容定位到中心

我想將導航欄中的內容居中放置到中心。使用類navbar-center，但它不起作用，因爲你可以看到上面的代碼。將導航欄的內容定位到中心

<div class="container"> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav navbar-center"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Public</a></li> 
        <li><a href="#">Comercial</a></li> 
        <li><a href="#">Residential</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div><!--end of div--> 
     </nav><!--end of navbar--> 
    </div><!-- end of div container-->

我也試過在我的CSS下面的代碼，但它沒有工作，要麼：

.nav{ 
text-align: center; 
}

在其上的幫助將不勝感激。

來源

2016-03-08 Sidney Sousa

您應該使用

.navbar{ 
     text-align: center; 
    }

來源

2016-03-08 19:38:50 scaisEdge

您應該添加保證金：自您.container流體元素，還可以指定它的寬度。您可能不希望它在較小的視口上以這種方式操作，因此您可以使用媒體查詢來更改它。 Here's a jsfiddle.

.container-fluid { 
    width: 493px; 
    padding: 0; 
    margin: auto; 
} 

@media (max-width: 768px) { 
    .container-fluid { 
    width: 100%; 
    } 
}

使用文本對齊這裏不會給你想要的結果，如果我讀了你的權利。文本對齊只會將文本置於其包含的元素中間。在你的情況 - 一個標籤。另外，如果你發佈了一些CSS，它肯定會幫助你弄清楚發生了什麼。

來源

2016-03-08 21:40:53 catch22

在我的CSS中，我有你發送的相同的代碼。它以鏈接爲中心，但並不是所有鏈接都在同一行中。聯繫人鏈接向下移動一行。 –

@SidneySousa只需調整（添加）包含元素的寬度，直到所有菜單項都舒適地放在一行上。 – catch22

我用下面的代碼，它完美的工作。謝謝。

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
    } 

    .navbar .navbar-collapse { 
    text-align: center; 
    }

來源

2016-03-14 12:35:16

將導航欄的內容定位到中心

回答

相關問題