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