垂直居中的圖像

我正在嘗試使用行高，垂直對齊方法將圖像居中放置在div內。看看這裏的例子，問題以及他們所有建議的其他修復，甚至可以證明這是可行的。但它不適合我。垂直居中的圖像

基本結構

CSS

div.photo_container 
{ 
    width: 160px; 
    height: 160px; 
    padding: 10px; 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    background-color: White; 
    box-shadow: 0px 0px 5px #AAA; 
    text-align: center; 
    line-height: 160px; 
} 
img.thumbnail 
{ 
    vertical-align: middle; 
}

基本上，容器總是160像素高，你所看到的，但是裏面的圖片可能是像100像素高。在這種情況下，我希望在容器的頂部和底部有30像素的間距，而我的圖像要在中間垂直對齊。

我錯過了什麼？

ANSWERED

原來這是一個DOCTYPE問題，我用的是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

的時候，我會一直使用HTML 5 DOCTYPE

<!DOCTYPE html>

來源

2012-05-10 James Hay

啊，在這種情況下，單純的「準標準模式」與嚴格的「標準模式」的問題。 http://hsivonen.iki.fi/doctype/使用嚴格的XHTML doctype聲明也是足夠的，但是你不可能真的有理由使用XHTML而不是普通的HTML，而且HTML5與它們之間的交互也很多。 – reisio

http://stackoverflow.com/a/10010055/1312610 – ShibinRagh

DOCTYPE聲明：<!doctype html>

（或者：valid code）

來源

2012-05-10 02:36:16 reisio

就是這樣。無需設置高度寬度。 –

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

這應該解釋如何去做。

來源

2012-05-10 02:29:59 Dennis

如果您瀏覽整篇文章，它不僅適用於背景圖片，該概念也適用於div。哦，無法贏得他們。 – Dennis

我會讓你回到零，因爲這是最初問題的合法解決方案。然而，我正在尋找一種方法來讓我目前的解決方案正常工作。 –

欣賞它，我從有時候試圖解決永遠不會很正確的事情的方法來看待它，所以我們需要從另一個角度來看待它。 HTML和CSS可以是這樣一個野獸，因爲它應該可以工作，但不是所以我們需要重構。我的壞 – Dennis

你的代碼似乎對我來說在chrome ..下面擺弄。有什麼我失蹤？

編輯：我沒有添加寬度/高度到不存在的圖像。

JS Fiddle

來源

2012-05-10 02:34:07

有什麼*他*失蹤了。：p – reisio

謝謝，但它的靜態寬度或高度不會改變它。 –

這似乎爲我工作或多或少

見JSFiddle

CSS

div.photo_container 
{ 
    width: 160px; 
    height: 160px; 
    padding: 10px; 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    background-color: White; 
    box-shadow: 0px 0px 5px #AAA; 
    text-align: center; 
    line-height: 160px; 
    border: 1px solid red; 
} 
img.thumbnail 
{ 
    vertical-align: middle; 
}

HTML

<div class="photo_container"> 
    <img alt="" src="http://www.totalesl.com/images/icon/funny-icon.jpg" class="thumbnail" /> 
</div>

來源

2012-05-10 02:37:29

但是當他試圖居中的圖像不是100px時，怎麼辦？他說他們可能是，但聽起來好像他們是可變大小，這意味着你需要一些靈活的 – Dennis

這是他提供的相同的代碼。：p – reisio

@ user1357437寬度並不重要，我想縮小SO標誌，用較小的圖像更新答案，它仍然有效 –

垂直居中的圖像

回答

相關問題