将float元素居中的几种办法
来源:互联网 发布:java调用ant脚本 参数 编辑:程序博客网 时间:2024/06/06 03:38
在HTML+CSS布局中,元素的居中一直是定位非常重要的部分。
下面这些方法基本上是我在网上查阅资料以及自己的一些思考改良所得,不完全算是自己的原创。
1、垂直居中(容器内垂直居中)
思路:在float元素外层加一个div,然后在css中设置display属性。
外层DIVcss样式:
div{ display: table-cell; margin: 0 auto;}
2.水平居中
方法一思路、在float元素外层加一个table ,在css中设置table的属性:
table{ margin: 0 auto;}
方法二思路、在float元素外层加一个div,设置外层div position 为 relative,float元素 position 为 absolute,然后通过相互的偏移量抵消来设置:
.outer{ position: absolute; left: 50%;}.inner{ position: relative; float: left; left: -50%; width: 200px; height: 200px; background-color: #000;}
方法三思路、在外层包裹一个div,设宽度与浮动元素总宽度相等,让外层div:margin:0 auto。
.outer{margin: 0 auto;width: 400px;}.inner{ /*这里我设置了两个浮动元素*/ float: left; width: 200px; height: 200px; background-color: #000;}
方法一、此思路也是从 水平居中 的方法三中扩展出来的:在外层加一个div,设宽高与浮动元素总宽高相等,然后设置外层div position 为 absolute ,最后通过left/top 以及margin-left/margin-top的值来调整,但是此方法的弊端是扩展性较差,增删一个float元素都要去改外部div 的宽高以及移动的距离。
.outer { width: 302px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -151px; margin-top: -50px; } .pp, .ppp, .pppp { float: left; height: 100px; width: 98px; background: #fff; border: 1px solid #000; }
方法二、与方法一思路相同,只是在CSS中的样式有一点小差别:
.outer{ width: 50px; height: 50px; background:red; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:auto;}.inner{ width: 50px; height: 50px; background: #000; float: left;}
当然设置了浮动元素之后要记得清除浮动,避免浮动元素带来的几大问题。
这里清除浮动我在查找资料的时候,根据资料的分析得出对普通流影响最小的清除浮动的方式是:
.outer:before,.outer:after { content:""; display:table; }.outer:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ .outer { zoom:1; }
至于原理的话这又是一篇很长的分析文,下次等我吃透了再回来继续 : )
0 0
- 将float元素居中的几种办法
- HTML元素居中的几种办法
- float 元素的水平居中
- div垂直居中的几种办法
- div垂直居中的几种办法
- 元素居中的几种方法
- 页面元素居中的几种方法
- 元素居中的几种方法
- 元素居中屏幕的几种方法
- 元素垂直居中的几种方法
- 元素垂直居中的几种方法
- html居中的元素带有float属性
- css使元素居中的九种办法
- float元素居中
- 给float元素居中
- html元素垂直居中的几种方法
- html元素水平居中的几种方法
- 几种我常用的元素居中总结
- LeetCode
- 【basis】SAP R3系统密码重置
- 关于虚函数排布顺序
- vuejs-指令详解
- 在shell脚本中调用另一个脚本的三种不同方法(fork, exec, source)
- 将float元素居中的几种办法
- HDU 5618 分治
- stm8s 实践课程之IAP设计编码(bootloader实现)
- Ajax进阶---JQuery中的Ajax(上)--代码是自己敲上去的
- 编写NSIS插件输出安装过程的日志
- K-Means实验
- Collection之List and Set
- 二叉搜索树的后序遍历序列
- Android Handler 梳理(二)