2013-05-27 37 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/