改善這個CSS3並達到相同的效果 - flexbox垂直對齊文本

我想創建一個使用一些新的css3技術的垂直導航菜單，但到目前爲止我只能用display:table獲得最接近想要的外觀。我不喜歡使用display:table/table-row/table-cell，主要是因爲它們將「單元格」限制爲表格形式（例如，您不能使用邊距將「行」或「單元格」間隔開），而且我也不喜歡額外的divs使列表垂直。我最初去這個方向的原因是爲文本使用vertical-align: middle。當我嘗試使用彈性框方法時，它不斷將兩行文本放在同一行上，我無法弄清楚如何分割它們。改善這個CSS3並達到相同的效果 - flexbox垂直對齊文本

你能幫助我實現相同的外觀，但有更多的靈活性，最好沒有額外的div？

工作實例display: table方法（似乎並不雖然完全居中）：http://jsfiddle.net/jKRDQ/

最近我使用Flex盒法來：http://jsfiddle.net/4wSN5/

最近沒有CSS3：http://jsfiddle.net/6gRcp/

來源

2013-03-16 tehaaron

你的表的方法有無效的標記：只有li元素可以是ul或ol元素的子元素。如果你需要額外的div，它必須是裏面的li。

您的Flexbox方法丟失box-orientation/flex-direction。通過詭辯，它被設置爲horizontal/row，這就是它們全部出現在一行中的原因。您li的CSS應該是這樣的：

http://jsfiddle.net/4wSN5/1/

#slide-out-menu li { 
    width: 75px; 
    height: 75px; 
    border: 1px solid black; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-flex-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
}

或者，你可能會留在了horizontal/row方向和使用的包裝，但這隻有在支持標準的瀏覽器工作規範（不包括啓用實驗性Flexbox支持的Firefox）。

您可能需要刪除Firefox的前綴，因爲它們的實現非常糟糕。我只包括他們，因爲我的Sass mixin發射了它們。

如果您打算使用Flexbox，從來沒有自己使用2009規範的屬性。雖然Opera和Chrome（都在-webkit-前綴下）支持舊規格和新規格（Opera在新規格上沒有前綴），但舊規格最終將被丟棄。

來源

2013-03-16 12:33:14 cimmanon

改善這個CSS3並達到相同的效果 - flexbox垂直對齊文本

回答

相關問題