使用css定位圖像的中心

假設我必須將圖像右移放在適當的位置，但我需要將其中心放在該位置。我想在div的左上角放置一個圖像，所以我將圖像放在div中，給出位置：相對於div和位置：絕對值，然後將其頂部和左側值設置爲0。相當有效，但我需要該圖像的CENTER位於左上角。我會手動設置頂部：-xpx，left：-ypx但是我沒有任何具體的圖像大小的值（這可能會有很大的變化）。所以有什麼辦法可以說這樣的：position：absolute-but-i'm-talking-about-the-center; top：0px; left：0px;？使用css定位圖像的中心

非常感謝你！

Matteo

來源

2012-12-24 Matteo Monti

你試過了嗎;

name_of_div_with_image { 
display: block; 
margin-left: auto; 
margin-right: auto }

給一個去。

來源

2012-12-24 14:13:44 Jeffers

這是不是要求太多的div的寬度聲明？ – asprin

您可以使用JavaScript喲獲取圖像的大小，然後設置所需的CSS左值。

要留意道路圖像的加載，雖然因爲它們是異步的所以不會necesserily時可用的文件已準備就緒。這意味着，除非你處理圖像正確，你將最終的0

來源

2012-12-24 14:14:15

寬度和高度尺寸應該在包裝另一個塊元素的圖像，並把負左側位置的圖像。

事情是這樣的：

<div id="something"> 
    <div class="imagewrap"> 
    <img> 
    </div> 
</div>

然後給#something的相對位置，.imagewrap絕對的，等等...而img應該有一個相對位置left:-50%。頂部相同。

來源

2012-12-24 14:20:51 pzin

不需要使用Javascript，這可以在CSS中完成。

所需的HTML：（你必須將DIV變爲明顯的IMG）

<div id="container"> 
    <div id="imgwrapper"> 
    <div id="img">Change this div-tag to an img-tag</div> 
    </div> 
</div>

所需的CSS：

#container 
{ 
    position: absolute; 
    left: 200px; 
    top: 100px; 
    height: auto; 
    overflow: visible; 
    border: 2px dashed green; 
} 
#imgwrapper 
{ 
    position: relative; 
    margin-left: -50%; 
    margin-top: -50%; 
    padding-top: 25%; 
    border: 2px dashed blue; 
} 
#img 
{ 
    display: block; 
    width: 200px; 
    height: 100px; 
    border: 2px solid red; 
}

Click here for a jsFiddle link

的margin-left: 50%;顯然使用容器時工作div，因爲容器的寬度將與內容的寬度完全相同。（您可能需要添加width: auto;）但margin-top: -50%;不會起作用，因爲容器div的高度將隨之改變，因此，你需要但在您使用本margin-top: -50%;，然後你需要修復這個錯誤也使得另一包裝DIV使用基於正百分比的填充。顯然可能有其他解決方案來解決這個問題，但解決方案應該是這樣的。

來源

2013-01-14 11:58:20 Yeti

使用css定位圖像的中心

回答

相關問題