如何在包裝中心浮動左側導航標籤？

我有一個導航選項卡的頁腳。我試圖將包含960px的包裝中的選項卡左右對齊20。這些選項卡位於一個包裝的內部，並且它們向左漂浮。我似乎可以將它們居中的唯一方法是在導航包裝器上放置一個寬度，但它不是純粹居中。如何在包裝中心浮動左側導航標籤？

這是它應該是這樣的：

enter image description here

下面是HTML：

<div class="wrapper"> 
     <div class="footer_nav clear"> 
      <a href=""> 
       <div class="nav_tab"> 
        Home 
       </div> 
      </a> 
      <div class="nav_tab">&#124;</div> 
      <a href=""> 
       <div class="nav_tab"> 
        About Us 
       </div> 
      </a> 
      <div class="nav_tab">&#124;</div> 
      <a href=""> 
       <div class="nav_tab"> 
        Portfolio 
       </div> 
      </a> 
      <div class="nav_tab">&#124;</div> 
      <a href=""> 
       <div class="nav_tab"> 
        Contact Us 
       </div> 
      </a> 
     </div> 
     <div class="copyright"> 
      Copyright 2013 Lanai Construction. License #579449 
     </div> 
     <div class="social_wrapper_footer"> 
      <div class="fb"> 
      </div> 
      <div class="t"> 
      </div> 
     </div> 
    </div>

和CSS：

.footer_nav { 
margin:0px auto 0px auto; 
margin-top:40px; 
margin-bottom:5px; 
vertical-align:center; 
} 
.nav_tab { 
font-family:'Edmon'; 
font-size:14px; 
font-weight:bold; 
float:left; 
color:#fff; 
text-align:center; 
margin-right:10px; 
}

這是所有裏面的一個包裝，960加20px左右

在此先感謝

來源

2013-08-03 LightningWrist

對於.nav_tab，嘗試display: inline-block而不是float:left。

來源

2013-08-03 17:00:49 Michelle

做同樣的事情，左浮動做 – LightningWrist

當我不使用display：inline-block或向左浮動時，選項卡居中但垂直堆疊。 – LightningWrist

按照@Michelle的說法，將'text-align：center'添加到您的'.wrapper'中 –

如何在包裝中心浮動左側導航標籤？

回答

相關問題