垂直對齊從來沒有工作

是的，顯然我做錯了。爲什麼不能像水平對齊一樣簡單？我坐下來，我的工作停了好幾個小時，試圖查找如何在中間垂直對齊，所以我不必用我最愚蠢的最可能的真的 bug你們問題。垂直對齊從來沒有工作

顯示塊或表格單元格，我讀的所有東西都不起作用。我想「也許如果我水平對齊我的img與.divID img，然後垂直對齊div本身」不幸的是，我希望能工作。但即使當我嘗試在中間垂直居中時，也會擾亂圖像居中，甚至無法工作。

TL; DR：我討厭嘗試垂直對齊的東西這麼多。

我試圖讓我的標題圖像垂直和水平居中。這是我的代碼，我正在努力。

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="logo"> 
      <img src="http://i.imgur.com/d0umnxt.png" /> 
     </div> 
    </div> 
</div>

CSS

body { 
    margin: 0px; 
} 
#header { 
    width: 100%; 
    height: 100px; 
    background-color: #151B1F; 
} 
#logo { 
    display: block; 
    margin: auto; 
}

來源

2014-01-12 ErraticFox

ErraticFox，一個simular Q隨一個跨瀏覽器解決方案賞金，（IE <7）被要求在這裏回答：HTTP：/ /stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div – Wayne

+1 @韋恩的鏈接。從來沒有見過這種方法，但是人很酷。 – knrz

@Wayne我嘗試過，我無法爲自己工作。 – ErraticFox

我恨table和table-cell絲毫不亞於未來的傢伙，但是當你知道父元素的高度（#header你的情況），事情變得非常簡單。

Here's a working fiddle。

你只需要以下樣式添加到您的CSS：

#header { 
    display: table; 
} 
#logo { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

來源

2014-01-12 03:35:34 knrz

說，如果我在同一個div中有兩個圖像，並且我想讓它們在中心垂直和水平對齊，那麼這樣做會起作用嗎？ :) – ErraticFox

[這裏是你尋找的JSFiddle]（http://jsfiddle.net/gdAry/1/）。 – knrz

我的意思是水平並排：P – ErraticFox

垂直對齊從來沒有工作

回答

相關問題