세로 줄 여러 줄의 리

Question

이것은 내가 달성하려고하는 것입니다. 난 수평 메뉴로 unordened 목록이 있습니다. <li>이 같은 중간에 정렬 수직이어야한다 :

 _______________________________________ 
|          | 
|          | 
| [____] [____] [____] [____] | 
|          | 
|_______________________________________|

문제 없음 지금까지 vertical-align: middle과 line-height를 사용하여.

 _______________________________________ 
|          | 
| [____] [____] [____] [____] | 
|          | 
|  [____] [____] [____]  | 
|_______________________________________|

지금까지 코드 : HTML

<ul> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
    <li><a href="#">item</a></li> 
</ul> 

문제는이 같은, 내가 두 줄을 가질 수 있도록하려면, 그 중간 aswell으로 정렬 한 것입니다 CSS

ul { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 100px; 
    background: lightblue; 
    text-align: center; 
    list-style: none; 
    vertical-align: middle; 
    line-height: 100px; 
} 
    ul li { 
     display: inline; 
    } 
     ul li a { 
      padding: 5px 15px; 
      margin: 0 10px; 
      background: lightgreen; 
     } 

I 이미 this과 this이 발견되었지만 그 중 하나는 도움이되지 않습니다.

나는 single line JSFiddle과 multi line JSFiddle을 만들었습니다.

Answer 1

가하는 <nav> 요소라고하고, ypu는 IE7 및 이전 지원없이 할 수있는, 어쩌면이 당신을 위해 작동합니다 : http://jsfiddle.net/LZfVY/1/

nav { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 100px; 
    background: lightblue; 
    line-height: 100px; 
    font-size:0; 
    text-align: center; 
} 

ul { 
    display:inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    background: lightblue; 
    list-style: none; 
    line-height: 2.2; 
    font-size:16px; 
} 
ul li { 
    display: inline; 
} 

ul li a { 
    padding: 5px 15px; 
    margin: 0 10px; 
    background: lightgreen; 
} 

Answer 2

나는 당신이해야 할 일은 자동으로 UL의 높이를 설정하는 것이라고 생각합니다.

ul { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: auto; 
    background: lightblue; 
    text-align: center; 
    list-style: none; 
    vertical-align: middle; 
    line-height: 100px; 
} 

는 the JS Fiddle에서 봐, 그리고 그것이 당신이 찾고 있던 무슨 않는 경우를 참조하십시오.

Answer 3

ul 스타일에 display:table-cell;을 추가하십시오. 그런 다음 이중선의 적절한 간격을 위해 필요에 따라 선 높이를 조정하십시오. 당신이 래퍼 요소를 사용할 수있는 경우