1、第一收录:图片居中(注:.box 最好用在img的父级元素上,而不要是祖父级),附链接参考:
http://www.cssrain.cn/article.asp?id=870 ,http://www.planabc.net/2006/11/20/css_vertical_center_solution/,
http://www.student.oulu.fi/~laurirai/www/css/middle/ (英文)
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style>
2、简单且兼容所有浏览器的清除浮动写法:(来源http://www.ajaxbbs.net/post/webFront/simple-clear-float.html)
另外收录一个: 清理浮动的全家 http://www.twinsenliang.net/skill/20090413.html
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
写道
对于IE只要使元素拥有Layout属性即可清除浮动,方法有很多,如height:1%,overflow:hidden,zoom:1等,但我们一般应选取尽可能不造成副作用的方式,即最优办法是采用zoom:1的办法。
对于符合标准的浏览器,一般采用CSS的:after伪类为浮动元素后面增加一个清除浮动的元素来实现。上面的代码通过增加一个.号,然后通过clear:both;display:block来清除浮动,然后通过visibility:hidden和height:0来隐藏这个点号。
content:'\20'指定在浮动列表后增加一个空白字符,首先这个字符不可见,无需visibility:hidden来隐藏,其次他没有高度,无需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。