Question

我正在尝试将菜单栏放在中间，我的徽标位于中间。现在一切都浮动但它不会居中到页面中间。此外，当它居中时，我需要放置在徽标左侧和右侧的背景图像，以根据页面的宽度调整大小 - 这是一个指向它的外观的链接 - Menu Test

在我的网站上我仍然有我创建的原始菜单，我将徽标放在菜单栏后面，并设置更长的宽度，以便背景拉伸但不会因为它而自动调整.... {{ 3}}

我知道我的代码并不完美，所以请耐心等待我

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;
    }

Answer 1

这应该解决您的对齐问题..只需替换您的规格。我只有一个菜单并将其置于中心位置。

请注意，您的标题位置是固定的＆gt;位置：相对会更好..

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/

将水平菜单居中，中间有图像

1 个答案: