                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

突然懵了！麻烦大神帮忙看下我这段代码整体怎么居中？

这个列表怎么让它显示在浏览器的中间？text-align:center不管用啊？

<html>
<head>
<style type="text/css">
ul {padding:0; margin:0; list-style-type:none; overflow:hidden;}
li {float:left;}
a:link, a:visited
{
display:block;
width:120px;
color:white;
background:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {background:red;}
</style>
</head>

<body>
<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">热点</a></li>
  <li><a href="#">用户</a></li>
</ul>
</body>
</html>

小小单身

2016-08-13

源自：初识HTML(5)+CSS(3)-升级版 15-5

关注问题我要回答

722

操作

收起

4 回答

慕仙8780541 回答被采纳 +3 积分
2016-08-13

套个盒子在外面盒子居中就行了

样式 .hezi{ position：fixed；left：50% }

<div class="hezi">

<ul>.....<\ul>

<\div>

0 回复有任何疑惑可以回复我~

#1

小小单身提问者

定位虽然可以，但是感觉有点怪怪的。。。能让它自动居中margin:0 auto就好了，但是这个也不行

2016-08-14 回复有任何疑惑可以回复我~

葛傑夫的女兒
2016-08-25

试了一下不知道是不是你说的效果刚开始学不对的请多指教。

<head>

<style>

table{margin:0 auto;}

</style>

</head>

<body>

<div>

<table>

<tr><td>

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">新闻</a></li>

<li><a href="#">热点</a></li>

<li><a href="#">用户</a></li>

</ul>

</tr></td>

</table>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

qq__少傷鈊_03128626
2016-08-16

ul外面加table，在设置table的margin为auto

0 回复有任何疑惑可以回复我~

Smile_Mylife
2016-08-13

取消对li设置的浮动,然后用div包含ul，设置一下宽度，然后设置margin左右auto，ul的text-align属性为center。

0 回复有任何疑惑可以回复我~

#1

小小单身提问者

取消浮动就变成就变成一列了，就不是导航条了

2016-08-14 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226952 人
解答问题 18247 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

3 回答登录框居中,求大神帮忙补全代码,让整体居中.

7 回答麻烦大家帮忙看下

1 回答麻烦帮忙看下

5 回答大佬们帮我看看这段代码

1 回答g各位大佬看一下这段代码为什么没有居中

搜索更多本课相关问答

突然懵了！麻烦大神帮忙看下我这段代码整体怎么居中？

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号