我們能想到的最簡單的垂直對齊

總結起來，在容器中垂直對齊內容的方法很少。這些是主要的方法http://jsfiddle.net/EjV4V/3/這個人是 - - 使用position和transform性能我們能想到的最簡單的垂直對齊

（如果你現在一些完全不同的方式來做到這一點，那將是非常慷慨的您提供的例子，我將在這裏包含它）不錯，但就我而言，有點矯枉過正，尤其是如果我們考慮渲染優化問題的話。將在所有現代瀏覽器中工作，將無法在IE7中工作。
使用display: inline-block財產與一個額外的輔助塊 - http://jsfiddle.net/mmxm4/3/。因爲使用額外的DOM元素，不要認爲這種方法是好的。在IE7中無法使用。值得一提的是（感謝@nclenorton提到這一點），我們可以使用:before或:after生成的內容。但是，再次 - not in IE7。
使用display: table和display: table-cell屬性 - http://jsfiddle.net/Ppk3p/2/。有時候這種方法很整齊，有時候不行。請注意，與提供的其他示例相反，子單元格寬度存在問題。任何方式，將無法在IE7中工作。
使用display: box - http://jsfiddle.net/9Phgg/9/ - 這是處理事情最性感的方式，但正如我們所知，規範並非100％完成。而且，Opera不支持彈出框。是的，當然，甚至不要考慮在IE7中嘗試這樣的事情。我的問題是：「關於上述所有方法在IE7中都會失敗的事實，在所有現代瀏覽器中垂直居中元素的最常用，最優雅，最簡單，最正確的方法是什麼？」IE7？「。

我有一種強烈的感覺，即使是2012年，使用表格佈局仍然是答案。我見過一些奇特的方法，例如使用position: absolute甚至是javascript表達式，但是這遠非優雅和簡單。

經驗豐富的HTML開發人員，糾正我，如果我錯了。

UPD： 其實，還有一個辦法，但我覺得它根本錯誤和unsuable的原因有很多。但值得一提的是。默認情況下，按鈕中的任何內容都是垂直居中的，所以請看 - http://jsfiddle.net/s5nz4/3/。這將工作在IE7，但我們都是成年人在這裏，我希望，瞭解這是不恰當的）））

來源

2012-07-04 shabunc

如果你想支持IE7，你不能有「優雅和簡單「;這是如此簡單：http://jsfiddle.net/EjV4V/4/ –

@IvanCastellanos粉紅色的盒子應該是positon：absolute;在那裏，但這依賴於知道對象的確切寬度和高度。如果你不知道元素的高度，你可以使用一個簡單的JS函數來獲取它，然後從那裏你可以設置負邊距來抵消塊。 – Chad

@Ivan你的解決方案不適用於鉻 –

如果我需要IE7支持，我傾向於去爲「display: inline-block有一個額外的元素」的方法。這確實工作在IE7與small change，這裏的an example。

如果我不需要IE7的支持，我通常使用display: table-cell的方法。

有時，我不能使用display: table-cell方法，通常當我需要在元素底部使用絕對位置時，使用display: table-cell。至少在Firefox中，position: relative不適用於表格單元格。在這些情況下，我使用display: inline-block方法，只是通過:before插入了「額外元素」，這可以保持HTML清晰。

來源

2012-07-04 16:13:46 thirtydot

我的答案假定你試圖垂直居中的元素的高度是未知的。如果知道高度*，則有更簡單的選擇。 – thirtydot

錯過了。這個確實很好。需要時間來收集和分析所有的答案，但看起來這是答案。 – shabunc

如果你知道你正在居中的高度，你可以使用絕對位置框50％頂部，然後使用框的一半高度的負邊距來居中。讓它工作起來非常複雜，ie7，但它確實有效。

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

例子：

.center { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; 
    margin-top: -150px; 
}

來源

2012-07-04 16:13:02

這很好，但@ thirtydot的修復更好 - 我們不需要現在阻止高度。 – shabunc

@shabunk我一直不喜歡用不必要的元素混淆我的html。只是一個偏好的事情。如果你不知道div高度，他的解決方案肯定會成爲一種方式。 –

CSS3的解決方案，這是box-align

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-pack

但它不是由某些瀏覽器的支持，所以我會用一些jQuery插件，如：

http://www.nealgrosskopf.com/tech/thread.php?pid=37

來源

2012-07-04 16:16:30

我想你還沒有讀完整個問題））） – shabunc

不是最好的方法來做到這一點，但你可以使用兩個div來強制粉紅色的盒子始終居中，一個「推」另一個：

http://jsfiddle.net/EjV4V/25/

這種方法應該與IE7一起工作，儘管您總是需要使用固定邊距。

來源

2012-07-04 16:40:42

好吧，當我們知道所有維度 - 並且所有維度都是絕對的 - 當然我們可以根據需要定位元素。但這不是一個垂直對齊，而只是一個看起來像居中對齊的定位。這個想法不是現在的尺寸。 – shabunc

雖然它不會在IE7中工作，使用的不是「吊具」僞元素應該在所有主要瀏覽器工作：http://jsfiddle.net/mmxm4/6/

至於與創建了一個元素的IE < = 7，adding.htc行爲我想，after班不會真的成爲犯罪。至少，沒有比使用PIE。

這裏的（測試了幾個項目）代碼：

<PUBLIC:COMPONENT lightWeight="true"> 
<!-- saved from url=(0014)about:internet --> 

    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="append_after()" /> 
    <PUBLIC:ATTACH EVENT="ondocumentload" FOR="element" ONEVENT="append_after()" /> 

    <script type="text/javascript"> 
     function append_after() { 
      if (!this.after) { 
       var el = element, 
        doc = el.document, 
        aft_el = doc.createElement('div'); 

       this.after = "true"; 
       aft_el.setAttribute('class', 'after'); 
       this.appendChild(aft_el); 
       aft_el.outerHTML = aft_el.outerHTML; 

       this.runtimeStyle.behavior = "none"; 
      } 
     } 
    </script> 

</PUBLIC:COMPONENT>

如果您在使用條件類，只需添加這樣的事情：

.lte-ie7 .parent { 
    behavior: url(/path/from/the/site/root/after.htc); 
}

然後，對於inline-block元素，添加display: inline; zoom: 1;的樣式。更優雅的解決方案，不過，將使用「Cross-browser inline-block」技術：定義一個全局類爲您在線塊，無論你需要使用它：

.inline-block { 
    display: -moz-inline-box; 
    display: inline-block; 
    vertical-align: top; 
} 

.lte-ie7 .inline-block { 
    display: inline; 
    zoom: 1; 
}

來源

2012-07-04 16:53:22 unclenorton

謝謝你的回答。 upvoted爲詳細信息，但這永遠不會是答案，因爲調用JavaScript並不是最簡單的方法） – shabunc

我們能想到的最簡單的垂直對齊

回答

相關問題