首页 > 代码库 > 浮动元素居中的实现方法~~很不错
浮动元素居中的实现方法~~很不错
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中 非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 1430px; } .demo ul { /*ul浮动，宽度自适应内部li的总宽度,left:50% 定位到中间;*/ float: left; position: relative; left: 50%; } .demo ul li { border: 1px solid #555; float: left; position: relative;/* 只能用相对不能用绝对 */ padding: 5px; left: -50%;/*li相对定位，li都向前偏移ul总宽度的一半 从而实现居中*/ list-style: none; margin: 10px; } </style></head><body> <div class="demo"> <ul> <li><a href="#">我居中了</a></li> <li><a href="#">我居中了</a></li> <li><a href="#">我居中了</a></li> <li><a href="#">我居中了</a></li> <li><a href="#">我居中了</a></li> </ul> </div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。