CSS垂直對齊稍微偏離

好了，這是推動我堅果：http://jsfiddle.net/C3YMJ/2/
的圖像應該在div垂直居中，但你可以看到，這是稍微偏離中心。我無法完全確定它的中心位置。任何幫助將非常感激。
謝謝。CSS垂直對齊稍微偏離

2012-07-21 Abraham

你應該採取JSW189的答案，它是唯一不強制解決方案... – Luis 2012-07-21 14:04:53

您可以使用CSS屬性position垂直居中圖像：

div { 
    position:relative; 
} 

img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto; 
}

2012-07-21 13:57:32 JSW189

+1這確實是最好的解決方案。無論父母身高如何，都能正確居中並工作。 – techfoobar 2012-07-21 14:08:59

是的！最後是有效的東西。謝謝，JSW189！ – Abraham 2012-07-21 14:29:38

-1

您的代碼不起作用。如果你增加兩個高度，它是完全不居中：http://jsfiddle.net/WouterJ/C3YMJ/3/

查看Centering in the unkown文章從克里斯Coyier欲瞭解更多信息如何解決這個問題。

編輯：刪除錯誤的語句。

2012-07-21 13:40:49

垂直 - 對齊不僅適用於表格。 – Rob 2012-07-21 13:44:55

@Rob抱歉，我以爲是。我已將它從答案中刪除，謝謝。 – 2012-07-21 13:46:46

您可以刪除vertical-align屬性，它不起作用，因爲圖像沒有可應用的子元素。

在div上使用line-height: 20px;。

2012-07-21 13:42:54 Guffa

我正在看這個。稍等一下。 – Abraham 2012-07-21 13:56:03

我想這會幫助我，謝謝。 – Abraham 2012-07-21 13:57:44

這樣做的缺點是，如果div的'height'改變了，你還必須改變'line-height'。 – JSW189 2012-07-21 13:59:52

添加line-height: 100%到您的DIV將解決問題。

2012-07-21 13:48:23 techfoobar

對不起，這似乎並沒有工作：http://jsfiddle.net/C3YMJ/19/ – Abraham 2012-07-21 13:50:31

我會採取高度關div和在頂部和底部使用填充代替。

html: <div><img src="https://www.google.com/images/srpr/logo3w.png" height="10" /></div> 
css: div {background-color: blue; padding: 5px 0;}

這將使它在中間對齊。

2012-07-21 13:54:54 ckornell

回答