您现在的位置: 破洛洛 >> 建站学院 >> 网站设计 >> CSS教程 >> 正文

网页制作技巧:清除浮动和图片水平垂直居中

作者:佚名 来源:不详 更新时间:2012-11-7
分享到

破洛洛文章简介:网页制作技巧:清除浮动和图片水平垂直居中。

1、如何清除浮动

方法1:

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2:

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3:

#test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

2、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;} #test p{*position:absolute;*top:50%;*left:50%;margin:0;} #test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父节点,p是img的父节点。

转载请注明:破洛洛(谢谢合作)
网友评论: