在網頁上定位圖像

如何讓圖像出現在網頁的中心，圖像應該是漂浮的，以便它在垂直方向以及水平方向上都會處於中間位置..但有很多片段，但沒有他們是完整的所以它不是F所列用途我:(我在網頁上沒有別的只有一個JPG在網頁上定位圖像

這就是我想，這是對齊水平居中而不是圍繞其垂直

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <title> Welcome </title> 
    <style type="text/css"> 
    .centeredImage 
    { 
    vertical-align: middle; 
    text-align:center; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding:0px; 

    } 
</style> 

</head> 
<body> 
<p class="centeredImage"> 
<img src="mypic.jpg" alt="welcome " width ="1024" height = " 565" > 
</p>

-T

來源

2013-07-25 Tom Ab

是否有一個理由，爲什麼你不使用背景圖片？ – fynn

HTML：

<img src="mypic.jpg" alt="Welcome" class="centered" />

CSS：

.centered { 
    width: 1024px; height: 565px; 
    position: absolute; 
    left: 50%; top: 50%; 
    margin-left: -512px; /* 1024/2 */ 
    margin-top: -283px; /* 565/2 */ 
}

例子：http://jsfiddle.net/mtvyp/

只是爲了清楚起見：我刪除了<p>標籤爲中心，因爲他們沒有語義價值（即他們沒有描述一個段落）。

相反，我們使用絕對定位將圖片放在窗口（其容器）的中點處。然而，這將左上角置於該位置。爲了實際居中，我們使用圖片的定義尺寸並使用原始尺寸的一半的負邊緣來重新定位它。

希望有所幫助。

來源

2013-07-25 21:50:34

這是一個非常棘手的情況，這裏討論的次數比我想象的要多。

有人會說使用javascript來測量窗口並手動移動圖像。

但是，如果你不知道JS和真的想使用垂直對齊，試試這個：http://www.vanseodesign.com/css/vertical-centering/

來源

2013-07-25 21:51:48 aquila421

在網頁上定位圖像

回答

相關問題