如何將圖像對齊到div的中心？

我正在嘗試將div中的圖像與中心對齊。我嘗試了以下，但它不工作。請告訴我如何解決這個問題。提前致謝。如何將圖像對齊到div的中心？

<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

來源

2011-12-27 Vinoth Kumar

什麼是類'erabox'的代碼？ – 2011-12-27 08:51:24

你的班級'erabox'代碼在哪裏？ – 2011-12-27 08:53:03

請嘗試以下CSS代碼。這將肯定 ALIGN = 「absmiddle」

來源

2011-12-27 08:51:42

CSS工作

.erabox{ 
    position:relative; 
} 

.erabox img{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-19px; /* Half of images height */ 
    margin-left:-115px; /* Half of images width */ 
}

來源

2011-12-27 08:55:26

plz嘗試此代碼

– 2011-12-27 09:00:44

絕對定位將從文檔內容流中移除圖像。對於像這樣簡單的水平對中任務來說，這可能是一種矯枉過正的行爲。 – 2011-12-27 09:14:02

我認爲父div的高度和寬度是已知的，因爲圖像不僅水平對齊，而且垂直對齊。我的解決方案是'display：table-cell'的替代方法，它在ie7 – 2011-12-27 09:20:43

<div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

你在這個div標籤需要style="text-align:center"。

來源

2011-12-27 08:55:29

中不起作用，只有text-align中心不能工作。你也應該從左邊或右邊給邊距或填充，然後你會讓你的圖像居中。 – 2011-12-27 08:57:37

它不起作用 – 2011-12-27 09:00:27

@Pro ..爲什麼我們需要使用'margin'或'padding'？我認爲'text-align：center'對於''的水平居中是完美的。 – 2011-12-27 09:02:18

請嘗試使用以下CSS代碼。它使您的<img>水平對齊中心，並垂直對齊中間。

.erabox{ 
    width:200px; 
    height:200px; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

來源

2011-12-27 09:07:47

雅..................工作正常 – 2011-12-27 09:11:07

只需使用保證金自動：

.erabox img { 
    display: block; 
    margin: auto; 
    }

DEMO：http://jsbin.com/apiwox/edit#html,live

來源

2011-12-27 09:12:41 Burntime

如果.erabox div的寬度和高度是固定的，或者至少它的高度和寬度總是肯定比形象的，你可以更大使用圖像作爲背景

HTML

<div class="erabox"></div>

CSS

.erabox{ 
    background:url("indicator2.gif") no-repeat; 
    background-position:50% 50%; 
}

來源

2011-12-27 09:33:45

如何將圖像對齊到div的中心？

回答

相關問題