CSS 2行垂直を中心とした縦型ul liメニュー

Question

こんにちは、次の奇妙な問題があります.1行であればメニューテキストを縦に並べ替えることができますが、2行ではデザインが乱れることがあります。すべてのブラウザで、それは異なって見えます。また、ブラウザ互換でなければなりません。 誰かがアイデアを持っていますか？ここ

オンライン版：

http://jsfiddle.net/Vm57C/6/

HTML：

<ul id="vert-menu"> 
     <li><a href="#">Organisatie</a></li> 
     <li><a href="#">Feiten en cijfers</a></li> 
     <li><a href="#">Historie</a></li> 
     <li><a href="#">Kennis & ontwikkeling</a></li> 
     <li><a href="#">Maatschappelijk betrokken</a></li> 
     <li><a href="#">Help mee</a></li> 
     <li><a href="#">Samenwerking in de zorg</a></li> 
     <li><a href="#" class="active">Samen leven, samen werken</a>   
     <ul class="sub-menu"> 
      <li><a href="#">Samen leven, samen werken</a></li> 
      <li><a href="#">Catering en horeca</a></li> 
      <li><a href="#">Kunst en cadeaus</a></li> 
     <li><a href="#">Lenen en spelen</a></li> 
     <li><a href="#">Maken en doen</a></li> 
     <li><a href="#">Recreatie</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Medezeggenschap</a></li> 
     <li><a href="#">Publicaties</a></li> 
    </ul> 

CSS：

/* verticaal menu */ 
#vert-menu { 
margin: 0; 
padding: 0; 
} 

#vert-menu ul { 
margin: 0; 
padding: 0; 
list-style:none; 
} 

#vert-menu > li { 
    margin-bottom: 5px; 
    color: #FFF; 
    font-weight: bold; 
    text-transform: uppercase; 
    width: 175px; 
    line-height: 30px; 
    font-size: 0.9em; 
    background:#FFF url(../images/vert-menu.jpg) no-repeat; 
} 


#vert-menu > li > a { 
    padding: 0 35px 0 5px; 
    display: block; 
    height: 30px; 
    line-height: 15px; 
    vertical-align:middle; 
    color: #FFF; 
    text-decoration:none; 
    outline:none; 
} 

#vert-menu > li:hover > a { 
    background:#FFF url(../images/vert-menu-active.jpg) no-repeat; 
    text-decoration:none; 
} 
#vert-menu > li > a.active { 
    background:#FFF url(../images/vert-menu-active.jpg) no-repeat; 
    text-decoration:none; 
} 

#vert-menu li > .sub-menu { 
    margin:0; 
    padding: 0 5px 0 5px; 
} 
#vert-menu li > .sub-menu > li a { 
    display:block; 
    line-height: 20px; 
    width: 165px; 
    text-transform: lowercase; 
    color: #83B810; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #83B810; 
    text-decoration:none; 
    outline: none; 
} 

#vert-menu > li > .sub-menu > li:hover > a { 
    color: #750D68; 
    text-decoration:none; 
} 
#vert-menu > li > .sub-menu > li > a.active { 
    color: #750D68; 
    text-decoration:none; 
} 

Answer 1

は、この問題の解決策です：

http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

ホープこのヘルプあなたすべて

Answer 2

私は、以下の変更が何をしたいんだと思う：

#vert-menu > li > a { 
    padding: 0 35px 0 5px; 
    display: block; 
    height: 30px; 
    line-height: 15px; 
    vertical-align:middle; 
    color: #FFF; 
    text-decoration:none; 
    text-align: center; 
} 

text-align:centerを追加しました。

個人的には、私は左揃えのバージョンを好みます。

Answer 3

それは表のセルのように見せること：ここで

#vert-menu > li > a { 
    padding: 0 35px 0 5px; 
    display: table-cell; 
    height: 30px; 
    line-height: 15px; 
    vertical-align: middle; 
    color: #FFF; 
    text-decoration: none; 
    outline: none; 
}