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