問題與格

垂直對齊圖像我知道有很多一個div垂直對齊的圖像多種方式，如在此間指出，已：How to vertically align an image inside div 問題與格

不過，從我自己的測試，我很好奇，爲什麼下面的東西似乎沒有中間對齊，當粘貼到一個.htm文件並在Chrome 39或IE 11中打開，但在JSFiddle中工作得很好：http://jsfiddle.net/4RPFa/6908/

有沒有什麼東西完全明顯，我錯過了？

謝謝。

<html> 
    <head> 
    <title>test</title> 
    </head> 
    <body> 
    <div style="height: 300px; line-height: 300px;background-color:green;"> 
     <img width="70" height="70" style="vertical-align:middle; background-color:blue;" alt="" src="image.png"> 
    </div> 
    </body> 
</html>

來源

2014-12-06 DevShark

在這個特定的情況下，它在小提琴外呈現不同的原因是因爲它們使用<!DOCTYPE html>，而您使用的是<html>（奇怪模式）。隨意嘗試一下。

你可以閱讀更多關於這裏的怪癖模式的怪事：http://www.cs.tut.fi/~jkorpela/quirks-mode.html

來源

2014-12-06 18:46:57

這正是我所追求的 - 對不起，如果這個問題似乎有誤導性。我會從這裏詳細瞭解這些差異。非常感謝！ – DevShark 2014-12-06 18:52:21

沒問題。隨意選擇這個作爲你的問題的解決方案。 :) – 2014-12-06 18:52:56

哈哈你看我的心！顯然還需要等一等！ – DevShark 2014-12-06 18:55:10

我用垂直對齊的最好辦法是

position:absolute; 
top:0; 
bottom:0; 
margin:auto;

它將在IE（甚至是8和7）之類的東西，爲什麼不嘗試一下這方面的工作？

如果你想絕對中心，只需使用

position:absolute; 
left:0; 
right:0; 
top:0; 
bottom:0; 
margin:auto;

..和這將這樣的伎倆

PS：有人問爲什麼這是最好的方式，沒有把握住機會看看是誰，這個問題很快就被刪除了......我的回答很簡單，我從來沒有遇到過這種方法的奇怪行爲或異常，所以，對於我來說，這是一個簡單，簡單和基本的做法，因此，最好的。

來源

2014-12-06 18:44:56 Alin

非常感謝，我將看看在未來使用這種方法。假設圖像總是比容器小（並且你不想用前者擴大後者的大小），那麼它應該被證明是健壯的。上面顯示的行高方法在這種情況下也會中斷，而且它可能不會完全取決於圖像的高度以及容器的高度 - 在使用解決方案時這不是問題：） – DevShark 2014-12-06 19:09:29

^^就像我說過的那樣，我從事的所有工作都是最好的解決方案:)我知道它有一天會派上用場。乾杯 – Alin 2014-12-06 20:09:33

我會給你一個負面評價+1的平衡負面評價：0 :) – Alin 2014-12-06 20:11:53

回答

相關問題