CSS圖片中心方法是一種用于將圖片放置在一個元素的中心位置的技巧。這種方法適用于多種不同的情況,包括輪播圖和頁面元素的背景圖。
方法如下:
.classname { position: relative; width: 100%; height: 0; padding-bottom: 100%; /* 設定padding占據高度為寬度的百分百 */ background-image: url("your-image.jpg"); /* 設置圖片 */ background-size: contain; /* 設定圖片大小為最小包含大小 */ background-position: center center; /* 設定圖片位于元素中心 */ background-repeat: no-repeat; /* 避免重復 */ }
解釋如下:
- position: relative;:使元素的位置相對于自身的位置設置。(注:如果該元素的父級中有position:relative或者position:absolute等,它就會相對于那個父級進行定位。)
- width: 100%;:這里使用100%確保元素寬度和其父級一樣。
- height: 0;:暫時設置高度為0,后面用padding來設定。
- padding-bottom: 100%;:這里用設定padding占據高度為寬度的百分百來讓元素的高度等于其寬度。這個在一些居中圖標的時候很好用。
- background-image: url("your-image.jpg");:設定圖片。
- background-size: contain;:設定圖片大小為最小包含大小,避免圖片縮放變形。
- background-position: center center;:設定圖片位于父級元素的中心。
- background-repeat: no-repeat;:避免圖片重復。
總結,CSS的圖片中心方法通過使用元素的padding實現了讓一個圖片在元素中心的效果,這種方法簡單,易于兼容,使用起來非常方便。
上一篇css圖片與圖片間隙
下一篇css圖片與文字沒有緊靠