怎么实现在页面中导航栏居中的效果？
<title>玻璃材质效果菜单</title><styletype="text/css">body{margin:0px;margin-top:20px;}#menu{f...
<title>玻璃材质效果菜单</title>
<style type="text/css">
body{
margin:0px;
margin-top:20px;}
#menu{
font-family:Arial;
font-size:14px;
background:url(under.gif);
padding:0px 0px 0 8px;
list-style:none;
height:35px;}
#menu li{
float:left;}
#menu li a{
display:block;
float:left;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 14px;}
#menu li a:hover{
color:#fff;
background:url(hover.gif);}
#menu li a strong{
display:block;
padding:0 14px 0 0;}
#menu li a:hover strong{
color:#fff;
background:url(hover.gif) no-repeat right top;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Flash</strong></a></li>
<li><a href="#"><strong>Dreamweaver</strong></a></li>
<li><a href="#"><strong>CSS</strong></a></li>
<li><a href="#"><strong>Photoshop</strong></a></li>
</ul>
</body>
</html>
下面是上面代码实现的效果
怎么让菜单栏都居中呢？ 展开
<style type="text/css">
body{
margin:0px;
margin-top:20px;}
#menu{
font-family:Arial;
font-size:14px;
background:url(under.gif);
padding:0px 0px 0 8px;
list-style:none;
height:35px;}
#menu li{
float:left;}
#menu li a{
display:block;
float:left;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 14px;}
#menu li a:hover{
color:#fff;
background:url(hover.gif);}
#menu li a strong{
display:block;
padding:0 14px 0 0;}
#menu li a:hover strong{
color:#fff;
background:url(hover.gif) no-repeat right top;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Flash</strong></a></li>
<li><a href="#"><strong>Dreamweaver</strong></a></li>
<li><a href="#"><strong>CSS</strong></a></li>
<li><a href="#"><strong>Photoshop</strong></a></li>
</ul>
</body>
</html>
下面是上面代码实现的效果
怎么让菜单栏都居中呢？ 展开
5个回答
展开全部
居中的方法无非是将要居中的元素外面的div设置margin：0 auto;即可
具体可再考虑下，比如讲menu放到一个宽度固定的div中，然后给这个div添加margin：0 auto;
具体可再考虑下，比如讲menu放到一个宽度固定的div中，然后给这个div添加margin：0 auto;
追问
是内容怎么实现始终居中呢？
追答
宽度100%的div层里嵌套menu的div层（该div有宽度，并且添加margin属性）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以试试把menu放到一个div中，然后div的css里写text-align:center;
或者尝试写menu的margin-left，多试几个数值应该就可以了。
或者尝试写menu的margin-left，多试几个数值应该就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先把#menu li 里面的浮动属性改为：display:inline;
然后在#menu 里面的加上：text-align:center; line-height:35px;
先试试吧，有什么问题就提提吧。
然后在#menu 里面的加上：text-align:center; line-height:35px;
先试试吧，有什么问题就提提吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
定义body标签或者#menu宽度
同时加上 margin-left:auto;margin-right:auto; 菜单就居中了
同时加上 margin-left:auto;margin-right:auto; 菜单就居中了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给menu加上下面几句
width:480px;
margin:0 auto;
width:480px;
margin:0 auto;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
