今天小编跟大家讲解下有关UL里的LI元素左浮动层一行显示时使其居中的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关UL里的LI元素左浮动层一行显示时使其居中的方法 的相关资料，希望小伙伴们看了有所帮助。
在制作页面是 li浮动是很常用的 一般情况也不用其居中 但有时 其特殊原因需要居中 这是就有点犯难了 这里有了一个很好的解决方法 主要是用了相对定位的原理。 在ul外报一层 使其相对定位 再ul相对定位 距左50% li相对定位 距右50%就实现了li左浮动后海居中显示。 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <meta name="keywords"content="飞科,工作室,飞科工作室,css,web,web标准,网页制作,平面设计,布局,"/> <meta name="description"content="欢迎您来到飞科工作室 本站致力于web标准化 研究css 注重代码书写中的规范；分享前台设计技巧"/> <title>无标题文档</title> <style type="text/css"> div, ul, li { margin: 0; padding: 0; border: 0; } body { font: 12px/1.6em 宋体 sans-serif; color: #585858; text-align: center; } .div1 { position:relative; width: 948px; height: 100px; margin: 20px auto 0 auto; background-color: #F9F9F9; border: solid 1px #D4D4D4; } .div1 ul { position: relative; left: 50%; float: left; } .div1 li { position: relative; right: 50%; display: inline; float: left; margin-left: 10px; line-height: 38px; } </style> </head> <body> <div class="div1"> <ul> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> <li>飞科工作室</li> </ul> </div> </body> </html>来源：爱蒂网
