CSS：如何將<img>定位到父元素

-1

這裏的中間是鏈接：http://www.cssdesk.com/PYBRZ CSS：如何將<img>定位到父元素

幫助，我不能讓這個元素（或任何具有不同的尺寸）將自己定位於中間父元素。我一直在搞這個問題2天，還是找不到解決這個問題的辦法。

以下是更新的鏈接：http://www.cssdesk.com/W3MvQ

不過，它不會自己定位到中間，它只是給中心:(

來源

2013-04-25 Fire Static

如果您添加了一些代碼，這將會很有幫助。 – slm 2013-04-25 01:17:12

你可以試試下面的CSS：

html, body { 
    height: 100%; 
    width: 100%; 
} 

#overlay { 
    position:relative; 
    background: black; 
    width: 100%; 
    height: 100%; 
} 

#overlay img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    outline: 1px dotted yellow; 
}

，看看下面的jsfiddle：http://jsfiddle.net/audetwebdesign/UwJZw/

如何工作

您在父容器（#overlay）上設置position: relative並將寬度設置爲100％，將高度設置爲100％。請注意，要使高度起作用，您需要將高度設置爲根元素（<html>）和<body>爲100％。

訣竅是將<img>絕對定位，並將頂部/底部/左側/右側位置設置爲零，然後將邊距設置爲自動，這將水平和垂直居中。

獎勵是，這個工程無論圖像的大小，沒有數學要求。

我添加了一個黃色的輪廓，所以顯示圖像的邊緣，這並不影響解決方案。

請注意，根據播放多少瀏覽器鉻，100％的高度可能會觸發垂直滾動條。你需要思考如何最好地考慮到你的頁面佈局的其餘部分。

另一方面，如果你有固定高度的容器，這就像一個魅力，特別是照片畫廊等。

該技術基於CSS 2.1，因此它應該可以在很多瀏覽器中使用。

來源

2013-04-25 01:37:55

你剛剛得到我需要的東西：D謝謝兄弟！ – 2013-04-25 01:49:59

好運作戰litte geen CSS怪物，歡迎來到SO！ – 2013-04-25 01:51:04

給margin:auto的圖像水平居中對齊。

.overlay img 
{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

這是從中心圖像的W3C標準。請參見本http://www.w3.org/Style/Examples/007/center.en.html

對於垂直對齊不直接，因爲你的div是固定的位置。相反，你可以戈夫背景的DIV

background:url("http://oi46.tinypic.com/56612.jpg") no-repeat center center

試試這個： - http://www.cssdesk.com/nSyPa

<div id="overlay"> 

</div> 


#overlay { 
    background: black url('http://oi46.tinypic.com/56612.jpg') no-repeat center center; 
    position: fixed; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    z-index:1000; 
    text-align: center; 
}

你也可以去與圖像上的margin-top，但是這將是更多的維護頭痛，你必須計算基礎上的各項決議等保證金..

來源

2013-04-25 01:00:58 PSL

仍然，我不能居中它的垂直和水平：http://www.cssdesk.com/W3MvQ – 2013-04-25 01:16:19

垂直對齊，指定圖像作爲您的div的背景 – PSL 2013-04-25 01:21:46

@FireStatic請參閱我的答案更新。 – PSL 2013-04-25 01:35:23

你將要使用

margin:auto;

來源

2013-04-25 01:02:25

OP意味着與中間垂直請注意本答案分爲兩部分：

你需要的是有點棘手。您需要知道父級的高度，以便應用邊距頂部，填充頂部或甚至位置絕對頂部和左側值;

看這個例如：

#overlay { 

    background: black; 
    position: fixed; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 700px; 
    z-index:1000; 
    text-align:center; 


} 

#overlay img { 
    margin-top:100px 
}

使用JavaScript可以動態檢測父的高度，使您可以相應地應用一些造型給孩子。

你也可以離開父母沒有任何尺寸，並添加特定的填充，在這樣的家長會帶着孩子的大小加上週圍的填充：

#overlay { 

     background: black; 
     position: fixed; 
     top:0; 
     left:0; 
     z-index:1000; 
     padding:80px; 


    } 

    #overlay img { 
     /*nothing in here unless you need any other style*/ 

    }

第一個答案**

的方法有很多，給家長的風格text-align:center

#overlay { 
    display: table; 
    background: black; 
    position: fixed; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    z-index:1000; 
    text-align:center; 
}

或圖像轉換成塊與特定與和保證金自動：

#overlay img { 


    display:block; 
    width:100px; 
    margin:auto 


}

圖像的默認值是inline-block的，這使得它作爲文本，這就是爲什麼文本對齊中心父作品，另一方面，如果你使它成爲一個塊，具有特定的邊距和自動保證，它不被視爲文本，並將在所有瀏覽器中居中。

既然你有不同的尺寸，並且可以;噸指定的寬度，只是在做你的榜樣以下工作，試試吧：

#overlay img { 

    display: block; 
    margin:auto; 

}

來源

2013-04-25 01:03:15 multimediaxp

它只是移動到中心:( 我的意思是中間 – 2013-04-25 01:09:51

哦！你的意思是垂直的！ – multimediaxp 2013-04-25 01:10:35

是的垂直和水平的 – 2013-04-25 01:13:27

CSS：如何將<img>定位到父元素

回答

相關問題