css中圖片使用絕對定位實現居中效果


存在問題

問題如標題所說,咱們在給圖片設置絕對定位的時候就會遇到無法居中圖片的問題。怎么解決?margin:0 auto?

很顯然這個時候設置margin是無效的。

解決方案

假設咱們的圖片寬度為100px;那我們就這么寫:

position:absolute;

left:50%;

margin-left:-50px; (此處margin-left的值寫該圖片寬度的一半)

 

解釋:

1、使用絕對定位,設置left值將圖片移到正中間,此時圖片的左邊框在屏幕的中線位置

2、設置margin-left,注意值為負數,咱們把圖片向左移圖片寬度一半的位置

 

這樣我們的問題就解決了~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM