在html頁面上的一個居中圖像

我想寫一個HTML頁面，我可以把任何圖像的網址，並顯示該圖像的黑色背景，在頁面上垂直和水平居中。在html頁面上的一個居中圖像

我有這樣的：

<html> 
<body style="background: black;"> 

<img src="http://i.imgur.com/n8o1E.png" style="display: block; margin: auto; max-height: 100%; max-width: 100%"> 

</body> 
</html>

做哪些工作適合那些比頁更高，更薄的圖像，但它並沒有垂直居中的東西。我怎樣才能做到這一點？

來源

2012-12-08 user1624005

的text-align：中心 – Sohail

<html> 
<head> 
<style> 
html, body, #wrapper { 
     height:100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     border: 0; 
    } 
    #wrapper td { 
     vertical-align: middle; 
     text-align: center; 
    } 
</style> 
</head> 
<body> 
    <table id="wrapper"> 
     <tr> 
     <td><img src="logo.png" alt="" /></td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2012-12-08 07:30:53 Moiz

這適用於那些比窗口短的圖像，但是當他們高，他們沒有大小下來。我不知道爲什麼。 – user1624005

因爲你需要通過jQuery來調整圖像大小。鏈接在這裏。 http://davejay.exit42design.com/entry/Design/44/ – Moiz

或參考這篇文章。 http://stackoverflow.com/questions/13232247/resize-image-to-fit-in-a-div-keep-ratio-centered-horizontally-and-vertically – Moiz

在html頁面上的一個居中圖像

回答

相關問題