中心導航菜單文本

我需要一些幫助！我從事某些工作，但無法完成工作。 :)我希望文本對齊中心。這是圖片：http://imageshack.us/photo/my-images/266/sn54.jpg/中心導航菜單文本

任何人都可以給我一些小費嗎？謝謝。

下面是代碼我使用：

HTML：

<div id="container"> 
    <div id="header"> 
      <ul class="nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="#">Protfolio</a></li> 
       <li><a href="#">About Me</a></li> 
       <li><a href="#">Contact Me</a></li> 
      </ul> 
    </div><!-- header end --> 
    </div><!-- container end -->

CSS：

#header{ 
position: relative; 
margin: 60px 0 0 0; 
width: 100%; 
height: 80px;} 

.nav{ 
background: url(../images/navbar.png) no-repeat 0 0; 
width:100%; 
height:80px; 
text-align:center; 
display:block;} 

.nav li{ 
float:left; 
list-style: none; 
margin: 10px;} 

.nav li a{ 
width:150px; 
text-shadow: 0 2px 1px rgba(0,0,0,0.5); 
display: block; 
text-decoration: none; 
color: #f0f0f0; 
font-size: 1.6em; 
margin: 0 .5em;} 

.nav li a:hover { 
margin-top: 2px; 
background-color: #d0d5d6;}

來源

2013-08-29 user2728044

這樣做的一個簡單的方法是將填充添加到您的nav右側和左側的元素等於帶區段的寬度。

.nav { 
    padding:0 XXpx; /* XXpx = width of the ribbon ends */ 
} 


.nav li { 
    width:25%; 
    text-align:center; 
    margin:0; 
}

以此作爲基礎，這應該解決您的問題。您可能需要使用精確的代碼來適應基於邊距等的需求。

或者，查看本教程，瞭解如何使用CSS創建此類功能區，而不依賴圖像： http://css-tricks.com/snippets/css/ribbon/

來源

2013-08-29 07:49:46 robooneus

謝謝。這幫了很多。 – user2728044

不知道背景圖像的硬盤的尺寸是特定的，但嘗試將背景放在標題元素而不是導航上。然後，您可以在導航UL的寬度設置爲帶圖像的內部部分的寬度，並設置保證金0汽車上水平居中它

來源

2013-08-29 07:49:08 LDJ

我會用一個div來包裝ul這個div有背景圖片。比你可以調整ul。

來源

2013-08-29 07:49:56 chris

中心導航菜單文本

回答

相關問題