改善这个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垂直对齐文本

回答

相关问题