CSS 센터 링크 및 페이지 끝까지 채우기

Question

내 텍스트를 세로로 정렬하려고합니다.

필자는 수직 정렬을 시도했다. 그러나 그것은 작동하지 않습니다.

필자도 내부에 실제로 높이가 맞는지 확인했습니다.

또한, 나비 막대를 페이지 끝에 붙이십시오, parallogram/rectangle. 링크 오른쪽에 공백이 없어야합니다. 그래서 이것은 사실상 하나의 긴 막대이고, parallograms로 나뉘어져 있습니다.

http://jsfiddle.net/Z4kUm/

<ul id="navlist"> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
        </ul> 

내 CSS :

ul#navlist { 
    padding:10px; 
    font: bold 12px Arial, sans-serif; 
    display: inline; 
} 

ul#navlist li { 
    float:left; 
    margin-right:20px; 
    display:inline-block; 
    zoom:1; 
    position:relative; 
    width:125px; 
    height: 50px; 
    list-style: none; 
    color:#757575; 
} 

ul#navlist li a { 
    display: inline-block; 
    vertical-align: middle; 
    text-decoration:none; 
    padding:5px 10px; 
    transform: skewX(-20deg); 
    -o-transform: skewX(-20deg); 
    -moz-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    width:115px; 
    height: 40px; 

} 

ul#navlist li a span 
{ 
    width: 100%; 
    height: 40px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
} 

ul#navlist li a { 
    background:#AAA; 
} 

Answer 1

자신의 높이를 일치하도록 스팬에 line-height 속성을 설정합니다.

jsFiddle example

ul#navlist li a span 
{ 
    width: 100%; 
    height: 40px; 
    line-height:40px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
}