如何使導航品牌集中對齊

我有下面的代碼，我想要做的是獲得導航標誌以相等像素爲中心，因此左右兩側的鏈接之間的距離相同。如何使導航品牌集中對齊

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <a class="navbar-brand" href='@Url.Action("Index", "Home")'></a> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li>@Html.ActionLink("PRODUCTS", "Products", "Products")</li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#" style=" font-family: Foco-Regular">VISIT US: <b>f</b></a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

，這是我的CSS

.navbar-brand { 
background-image: url("/Content/Images/Brand-Background-New5.png"); 
background-repeat: no-repeat; 
display: block; 
height: 94px; 
left: 42%; 
margin: auto; 
position: absolute; 
text-align: center; 
top: 16%; 
width: 301px; 
z-index: 9999;

}

現在在大屏幕上即dessktops上述工作正常，但是當我最小化瀏覽器，或者有人打開網站上說一15英寸的筆記本電腦的navbar品牌不再居中，它看起來更多的權利？我怎麼可以將其鎖定，使其保持不論中心與屏幕尺寸的

來源

2015-02-11 Code Ratchet

可以使用CSS鈣（）函數：css calc tutorial

發生了什麼事是，在小屏幕上，42％是在空間向左的導航，導航本身佔據了屏幕的50％（因爲它非常小），而你留下了2％的權利。

導航的寬度是多少？寬度：301px;
電腦屏幕的總寬度是多少？ 100％
所以空間的完全集中導航左邊應該是：（100％-301px）/ 2
求解方程，我們得到：50％-150px

只是修復在一行中的CSS代碼說：

left: calc(50% - 150px);

的空間AROUND THE - （減號）是重要的

產生的CSS應該是：

.navbar-brand { 
    background-image: url("/Content/Images/Brand-Background-New5.png"); 
    background-repeat: no-repeat; 
    display: block; 
    height: 94px; 
    left: calc(50% - 150px); 
    margin: auto; 
    position: absolute; 
    text-align: center; 
    top: 16%; 
    width: 301px; 
    z-index: 9999; }

來源

2015-02-11 00:48:31 cake

我無法在引導程序css中找到nav的確切大小，但正如您可以從我的代碼中看到的，我的.container具有1170像素的寬度，並且在容器內部是我的徽標和鏈接 – 2015-02-11 01:07:28

但是除此之外，它的工作原理 – 2015-02-11 01:08:27

什麼是精確元素你想要居中？導航？容器？別的東西？將該CSS代碼添加到您需要居中的那一個元素。在chrome中右鍵單擊該元素 - >單擊「檢查元素」，然後單擊「計算」樣式以查看它的確切寬度。然後，回到你的代碼中，確保改變'width：301px;'和calc'left：calc（50％ - 150px）;'以反映新的寬度（對於calc函數，寬度應該除以2。） – cake 2015-02-11 01:11:35

如何使導航品牌集中對齊

回答

相關問題