如何將圖像粘貼到可見屏幕的底部並居中？

我有一個網站，我需要有一個圖像在可見頁面的底部居中。因此，在任何屏幕尺寸下，圖像仍然位於底部並居中。如何將圖像粘貼到可見屏幕的底部並居中？

2010-04-03 Shawn

左50％沒有把它放到我的鏈接的中心。 testing-zone-51.blogspot.com – Shawn 2010-04-03 10:43:54

好吧我解決了這個問題:) – Shawn 2010-04-03 11:00:55

因爲你是一個新用戶在這裏請選擇一個問題的最佳答案作爲問題解決時接受的答案。它有助於指向其他人該解決方案爲你工作，並給回答者的聲譽 – 2010-04-03 11:12:40

使用純CSS，你可以在所有的瀏覽器新

.fix{ 
    position:fixed; 
    bottom:0px; 
    left:50%; 
    } 
<img src="yourimagepath" class="fix"/>

和IE6實現這一點，你可以用 position:absolute;，而不是固定的。它會將圖像放置在頁面的底部，但當您向上滾動時，圖像將隨頁面一起滾動。遺憾的位置：固定不IE6

來源

2010-04-03 10:33:59

如果職位：絕對的作品，爲什麼打擾使用位置：固定在較新的瀏覽器？ – xandy 2010-04-03 10:36:27

@xandy：固定是一個對象相對於瀏覽器窗口的位置。絕對值是對象相對於其包含元素的位置 – 2010-04-03 10:43:49

@shawn：我看到了ur代碼。嘗試在div內的圖像上使用ARR類，而不是div – 2010-04-03 10:50:07

支持你應該把它放到一個div，然後，想象你的形象是500像素寬：

div.className{ 
position:absolute; 
margin-left: -250px; /* very important for the image to be centered */ 
left:50%; 
bottom:0px; 
}

來源

2010-04-03 10:55:18 fmsf

老問題，但這裏是我想出了最好的解決方案。將圖像放入容器div中，div位於屏幕的底部，圖像居中放置。 div的設置寬度爲100％，因此圖像可以正確居中。對於上班的圖像margin:auto;必須與display:table;

使用被顯示爲表元素display:table;意味着你不必爲固定寬度設置爲你想要的中心元素。

<style> 
    .sticky-image-wrapper{ 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
    } 

    .sticky-image-wrapper img{ 
     display: table; 
     position: relative; 
     margin: auto; 
    } 
    </style> 

    <div class="sticky-image-wrapper"> 
     <img src="myimage.jpg" /> 
    </di>

來源

2013-07-18 16:58:13 stuyam

如何將圖像粘貼到可見屏幕的底部並居中？

回答

相關問題