使用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的中心导航栏

回答

相关问题