垂直移動圖像頂部或中心

我有一個簡單的建設頁面，並希望我的建設中的圖像對齊屏幕中間。水平的這是沒有問題的，但垂直我甚至不能定位圖像。垂直移動圖像頂部或中心

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>Page Under Construction</title> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 
<style type="text/css"> 
body { 
background-color:#d7df29; 
width: 100%; 
height: 100%; 

} 
.img { 

text-align: center; 
margin: 0 auto 
vertical-align: middle; 
top:500;  

    } 

#html5 { 
position:absolute; 
top:0; 
right:0; 
} 

</style> 
</head> 
<body> 
<div class="img"><img src="1.jpg" alt="Under Construction"></div> 
<div id="html5"><img src="images/img_html5_FR.png" height="120" width="120" alt="" /> </div> 
<img src="images/fb2.png" style="position: fixed; top: 350px; left: 0px;"  title="Bierzyk na Facebook'u" alt="Bierzyk na Facebook'u"> 

</body> 
</html>

來源

2013-02-04 Daniel Hernandez

一個在IMG類，1.JPG –

如果你讓你的.img有100％的高度，你可以設置圖片，作爲該分區的background-image（或body），然後垂直對齊就這樣。這應該作爲您的頁面上的其他元素是絕對定位和固定

來源

2013-02-04 12:43:26 Pete

因爲我有點目前困惑的代碼示例會很好 –

對不起，剛剛注意到您的圖像div是從頂部500px，我的答案將無法正常工作，因此我將它刪除 – Pete

它不必從頂部500px。在所有決議中最好的將是中間立場。 –

添加此

.img { 
    position:absolute; 
    top:50%; 
    left:50% ; 
    background:red; 
    margin:-64px 0 0 -64px; 
    }

DEMO

來源

2013-02-04 12:47:38 Sowmya

我試着完全相同的代碼，但在本地主機它看起來像這樣http://s7.directupload.net/file/d/3156/pygbqrtn_png.htm –

垂直移動圖像頂部或中心

回答

相關問題