DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁制作技巧:清除浮動和圖片水平垂直居中
網頁制作技巧:清除浮動和圖片水平垂直居中
編輯:CSS進階教程     

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的父節點。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved