如何將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>