2013-05-27 33 views
2

我想用我的標誌居中在菜單欄中間。現在一切都是浮動的,但它不會居中在頁面中間。此外,當它居中時,我需要背景圖片,我放置在徽標的左側和右側,根據頁面寬度調整大小 - 這裏是它的外觀樣式鏈接 - Menu Test居中在中間有一個圖像的水平菜單

我的網站我仍然有我創造,我放在菜單欄後面的標誌原始菜單和設置較長的寬度,這樣的背景會伸展,但它不會自動,因爲它調整.... Current Menu

我知道我的代碼是不完美的,所以請只忍受我

html

<div id="access"> 
     <div class="menu-container"> 

      <ul id="menu-left" class="menu"> 
        <li class="menu-item"> 
         <a href="#home">Home</a> 
        </li> 
        <li class="menu-item"> 
         <a href="#about">About</a> 
        </li> 
        <li class="menu-item"> 
         <a href="#services">Services</a> 
        </li> 
      </ul><!--END of menu-navigation-left--> 

      <ul id="menu-center"> 
      <li class="menu-item"> 
      <img src="images/logo.png" alt="Menu"> 
      </li> 
     </ul> <!--close div center--> 


     <ul id="menu-right" class="menu"> 
         <li class="menu-item"> 
          <a href="#">Blog</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#contact">Contact</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#portfolio">Portfolio</a> 
         </li> 
     </ul><!--END of menu-navigation-left--> 

     </div><!--END of menu-navigation-container--> 
    </div><!--END of access-->       

CSS

header { 
    position:fixed; 
    } 


    #access { 
    width:100%; 
    overflow:hidden; 
    left:50%; 

    } 

    #access ul.menu{ 
    display: inline-block; 
    } 

    #access ul { 

    } 

    #access ul a{ 
    display:block; 
    } 

    #access ul#menu-left { 
    height:120px; 
    background-image:url(../images/menu.png); 
    } 

    #access ul#menu-center { 
    height:120px; 
    } 

    #access ul#menu-right { 
    height:120px; 
    background-image:url(../images/menu.png); 
    } 


    ul, li { 
    margin:0px; 
    padding:0px; 
    list-style:none; 
    float:left; 
    display:block; 
    } 



    #access a { 
    display: block; 
    font-size: 16px; 
    line-height: 15px; 
    padding: 13px 10px 12px 10px; 
    text-transform: titlecase; 
    text-decoration: none; 
    font:"Mc1regular", Arial, sans-serif; 
    } 

    a:link{ 
    color:#fff; 
    } 

    a:visited{ 
    color:#fff; 
    } 

回答

0

這應該理清你的對齊的問題..只是與您的規格進行更換。我只需要一個菜單​​並將其居中。

請注意,你的頭的位置是固定>的位置是:相對會比較好..

div.container { 
width: 1160px; 
margin: auto; 
margin-top: -1; 
margin-bottom: -1; 
padding: 0; 
padding-top: 10px; 
background-color: #2d2d2d; 
} 

div.box { 
margin: auto; 
margin-top: 20px; 
margin-bottom: 20px; 
padding: 10px; 
padding-bottom: 20px; 
border: solid 1px #A29060; 
background-color: #000; 
overflow: hidden; 
width: 940px; 
} 
div.top { 
text-align: left; 
margin: auto; 
margin-left: 20px; 
padding-top: 12px; 
padding-bottom: 11px; 
font-weight: normal; 
font-size: 14px; 
overflow: hidden; 
width: 980px; 
text-transform: uppercase; 
} 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 
li { 
float: left; 
padding-right: 20px; 
} 
a { 
display: block; 
color: #a29060; 
text-decoration: none; 
} 


<div class="container"> 
    <div class="box"> 
    <div class="top"> 
     <ul > 
     <li><a href="contact.html" title="">Contact</a></li> 
     <li><a href="policy.html" title="">Policies</a></li> 
     <li><img class="logo" src="images/logo.jpg" alt="logo" /></li> 
     <li><a href="policy.html" title="">Policies</a></li> 
     </ul> 
    </div> 

看到這個小提琴

http://jsfiddle.net/yvytty/RJ4Yp/

您也可以看看這個(這是未完成),但它有基本的佈局排序,菜單等

https://www.yve3.com/index.html

這也是一個偉大的論壇,HTML.net的鏈接。他們給你的網站很好的意見,並有很多專業知識(就像這裏)

http://www.html.net/forums/