如何将css柱子垂直对齐？

Question

具有下面的代码：http://codepen.io/anon/pen/wCcfA

HTML：

<ul id="menu-main-menu"> 
    <li><a>Home</a></li> 
    <li><a>About</a></li> 
    <li><a>Portfolio</a></li> 
    <li><a>Blog</a></li> 
    <li><a>Contact</a></li> 
</ul> 

CSS：

#menu-main-menu { 
    padding: 0; 
    height: 77px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 42px; 
    border: 1px solid blue; 
    width:250px; 
} 

#menu-main-menu li{ 
    display: block; 
    list-style: none; 
    height: 24px; 
    border: 1px solid red; 
} 

我怎么能垂直对齐在“菜单 - 主要的最底部所有的 “礼” 元素菜单“而不是顶部？

Answer 1

我怎么能垂直对齐所有的“礼”的元素在“菜单 - 最底部主菜单“而不是顶部？

我不认为vertical-align可以应用在这里。

但有应工作的方法：使用transform先翻转过来，Y轴的整个菜单 - 然后再打开列表项翻转他们“回”到可读：

#menu-main-menu { 
    /* … */ 
    -webkit-transform:scaleY(-1); 
    transform:scaleY(-1); 
} 

#menu-main-menu li{ 
    /* … */ 
    -webkit-transform:scaleY(-1); 
    transform:scaleY(-1); 
} 

http://codepen.io/anon/pen/Abrxl

当然围绕翻转菜单的改变项目的顺序 - 纠正，他们在HTML命令就必须变过：http://codepen.io/anon/pen/yxDsi是否是一个妥协your're愿意做，是你来决定。

---

我加了前缀-webkit-版和这里的前缀的一个，也是-moz-版本列属性的，但在Firefox中，似乎有一些额外的利润或类似的事情的东西。这似乎来自应用列属性已经虽然，似乎并不是应用转换的结果。也许你会找到一个解决方案，让自己看起来更顺畅。

Answer 2

一种解决方案是使用margin-top每4N li元素，如：

#menu-main-menu { 
 
    padding: 0; 
 
    height: 77px; 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 42px; 
 
    border: 1px solid blue; 
 
    width: 250px; 
 
} 
 
#menu-main-menu li { 
 
    display: block; 
 
    list-style: none; 
 
    height: 24px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 
#menu-main-menu li:nth-child(4n) { 
 
    margin-top: 24px; /*add margin top*/ 
 
}

<ul id="menu-main-menu"> 
 
    <li><a>Home</a> 
 
    </li> 
 
    <li><a>About</a> 
 
    </li> 
 
    <li><a>Portfolio</a> 
 
    </li> 
 
    <li><a>Blog</a> 
 
    </li> 
 
    <li><a>Contact</a> 
 
    </li> 
 
</ul>