本文摘自PHP中文网,作者anonymity,侵删。
今天在调整ul居中的问题时,遇到了点小困难,以前在使用ul时候,让其不是垂直的排列而是,横着排列都是使用float:left这个属性,但是呢,今天我在弄一些友情链接的时候,就出现了ul在div中居中不了的问题,就是在div中加入了style=“text-align:center;” ul也不居中,最后仔细对比了网上的,发现时用了float:left的原因,首先平铺,可以对ul的style使用display:inline,而不必使用float属性,这样之后在div上就可以使用style=“text-align:center;” 使ul列表居中显示了。
1、假设最初的的代码是这样:
1 2 3 4 5 6 7 8 9 | < div id = "links" style = "border:1px solid red;" >
< ul >
< li >< a href = "#" >link111111</ a ></ li >
< li >< a href = "#" >link2222</ a ></ li >
< li >< a href = "#" >link33333</ a ></ li >
< li >< a href = "#" >link44444</ a ></ li >
< li >< a href = "#" >link555555</ a ></ li >
</ ul >
</ div >
|
2、去除列表前面的黑点(在ul的style中使用list-style-type:none;)
1 2 3 4 5 6 7 8 9 | < div id = "links" >
< ul style = "border:1px solid red;list-style-type:none;" >
< li >< a href = "#" >link111111</ a ></ li >
< li >< a href = "#" >link2222</ a ></ li >
< li >< a href = "#" >link33333</ a ></ li
<li>< a href = "#" >link44444</ a ></ li >
< li >< a href = "#" >link555555</ a ></ li >
</ ul >
</ div >
|
如下图所示:

3、使li横排显示并且ul位于div的中间位置,(li使用style="display:inline;"),如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type= "text/css" >
#links { text-align : center ;}
#links ul{ border : 1px solid red ; list-style-type : none ;}
#links ul li{
display : inline ;
}
</style>
<div id= "links" >
<ul>
<li><a href= "#" >link 111111 </a></li>
<li><a href= "#" >link 2222 </a></li>
<li><a href= "#" >link 33333 </a></li
<li><a href= "#" >link 44444 </a></li>
<li><a href= "#" >link 555555 </a></li>
</ul>
</div>
|
如下图所示:

到此为止实现ul中的li横排显示,并且ul在div里居中显示。
以上就是css中怎么把ul居中的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css是c语言吗
css层叠样式表的含义是什么
css的四种引入方式分别是什么
css怎么设置图片拉伸
css怎么设置鼠标经过元素显示图片
css中position属性有哪些用法
css font-family属性怎么用
css input大小怎么设置
css什么是圣杯布局?
css字符间距怎么设置
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中怎么把ul居中