css如何让浮动元素水平居中
类别:Web前端 浏览量:1625
时间:2015-8-5 css如何让浮动元素水平居中
css如何让浮动元素水平居中方式一
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
/** relative left 50% */
.page { float:left; position:relative; left:50%; }
/** relative right 50% */
.page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }
</style>
</head>
<body>
<li class="wrap clearfix">
<ul class="page">
<li> <a href="#">上一页</a> </li>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">5</a> </li>
<li> <a href="#">6</a> </li>
<li> <a href="#">下一页</a> </li>
</ul>
</li>
</body>
</html>
这里主要用到position:relative配合left:50%的技巧,父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%。
方式二
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
.inwrap{ float:left; position:relative; left:50%;}
.page { float:left; position:relative; left:-50%; }
.page li { float:left;margin:0 5px; }
.page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<li class="wrap clearfix">
<li class="inwrap">
<ul class="page">
<li> <a href="#">上一页</a> </li>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">5</a> </li>
<li> <a href="#">6</a> </li>
<li> <a href="#">下一页</a> </li>
</ul>
</li>
</li>
</body>
</html>
父元素和子元
标签:css居中
热门推荐
- php怎么设计策略模式(php设计模式之策略模式应用案例详解)
- dockerbuild清除缓存(Docker自动化构建Automated Build实现过程图解)
- ashx 文件怎么用
- 如何清除浮动元素带来的影响(关于清除浮动塌陷的几种方法总结)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- python递归深度遍历多叉树(Python实现二叉树的常见遍历操作总结7种方法)
- linux连接工具命令行长度设置(linux userdel 命令的使用)
- nginxhttp转https原理(nginx如何将http访问的网站改成https访问)
- mysql更新数据库表中的数据语法(Mysql联表update数据的示例详解)
- Mysql中CONCAT、CONCAT_WS字符串拼接函数