使用CSS的中心導航欄

我想中心我的導航欄。我檢查了我的網站，但沒有任何作品，我完全難倒，爲什麼它不會中心，這裏是我的導航欄HTML，我想中心：使用CSS的中心導航欄

<div class='nav'> 
<ul class='menu' id='menu'> 
<li><a expr:href='data:blog.homepageUrl'>home</a></li> 
<li><a class='drop-ctg' href='#'>PORTFOLIO</a> 
    <ul> 
    <li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li> 
    <li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li> 
    <li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li> 

    </ul> 
</li> 
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li> 
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li> 
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li> 


</ul> 
</div>

這裏是CSS

*{ 
    margin:0; 
    padding:0; 
    outline:0; 
} 
.nav { 
    width:950px; 
    height:auto; 
    border-bottom:1px solid #eee; 
    margin:10px auto 5px; 
    display:inline-block; 
} 
.menu { 
    width:auto; 
    list-style:none; 
    font:$pagenavifont; 
    text-align:center; 
    margin:0 auto; 
} 
.menu a { 
    float:left; 
    color:#999; 
    text-decoration:none; 
    text-transform:uppercase; 
    width:auto; 
    line-height:36px; 
    padding:0 20px; 
} 
.menu a:hover,li.menuhover a{ 
    color:#111; 
} 
.menu li { 
    position:relative; 
    float:left; 
    width:auto; 
} 
.menu li:last-child { 
    background:none; 
} 
.menu ul{ 
    display:none; 
    position:absolute; 
    top:36px; 
    left:0; 
    background:#fbfbfb; 
    display:none; 
    list-style:none; 
} 
.menu ul li{ 
    float:none; 
    border-top:1px solid #e3e3e3; 
    border-right:1px solid #e3e3e3; 
    border-left:1px solid #e3e3e3; 
    width:auto; 
    background:none; 
} 
.menu ul li:last-child { 
    border-bottom:1px solid #e3e3e3 
} 
.menu ul li a{ 
    float:none; 
    display:block; 
    background:none; 
    line-height:36px; 
    min-width:137px; 
    width:auto; 
    text-align:left; 
    padding-left:10px; 
    color:#444; 
} 

.menu ul li a:hover{ 
    background:#fdfdfd; 
    color:#777; 
}

我會給你一個頁面的鏈接，但是它正在Dreamweaver中完成，還沒有結束。 logobar.jpg是該網頁的徽標。我喜歡它的外觀，但它需要居中，而不是在我縮小屏幕尺寸時切斷或帶到下一行。

我在幾乎所有的類上都試過了float: right,float: left和float: none; text-align: center在html端的每個類上;每個班級我都試過align=center; display: inline,inline-block在ul和li類。

謝謝你的幫助！

來源

2014-01-05 user3161992

在您.menu類，你有text-align:center集。我們當然可以使用它來居中子節點。

所以你.menu li CSS屬性中，添加display:inline-block和刪除彩車。這將以您的列表項目爲中心。

見琴：http://jsfiddle.net/RGREA/

來源

2014-01-05 06:58:55

<style> 
div.nav{margin: 3px auto;} 
</style>

來源

2014-01-05 07:25:23 user3162041

添加更多的上下文，而不僅僅是代碼... – Phlume

使用CSS的中心導航欄

回答

相關問題