정렬되지 않은 목록을 사용하는 사다리꼴 div의 가운데에 맞춰 텍스트

Question

각 사다리꼴에 텍스트가 가운데에 표시되도록하려고 시도했지만 방법은 확실하지 않습니다!

http://jsfiddle.net/fYkq4/

HTML 구조는 다음과 같습니다

<ul id="menu"> 
    <ul><div class="fade-div" id="trapezium1"> HOME </div></ul> 
    <ul><div class="fade-div" id="trapezium2"> HOME </div></ul> 
    <ul><div class="fade-div" id="trapezium3"> HOME </div></ul> 
    <ul><div class="fade-div" id="trapezium4"> HOME </div></ul> 
    <ul></ul> 
</ul> 

내가 모양이 반전 얻을 그러나 나는 border-bottom: 80px solid blue; 및 border-top: 80px solid blue;를 사용하는 사이에 변경해야는 trapeziums을 얻기 위해 기술을 만지작 거 리고 CSS의 경계를 사용하는 - 경우 즉, 내가 사용 상단 텍스트가 함정 아래에있는 경우 하단 텍스트가 안에 있습니다 ( 하지만 실제로는) t 랩.

모든 HOME이 모든 사다리꼴 안에 일관되게 포함되도록하려면 어떻게해야합니까? div에서 텍스트를 이동하여 div를 플로트시켜야합니까? 또는 텍스트를 다른 div에 넣고 부동 상태로 만드시겠습니까?

Answer 1

이 바이올린처럼 할 수있는 :

http://jsfiddle.net/xonium/PqXbu/

중요 부분은 차단제

<div id="menu"> 
    <ul> 
     <li class="fade-div" id="trapezium1"> HOME1 </li> 
     <li class="fade-div" id="trapezium2"> HOME2 </li> 
     <li class="fade-div" id="trapezium3"> HOME3  
     <div class="blocker"></div> 
     </li> 
     <li class="fade-div" id="trapezium4"> HOME4 
     <div class="blocker"></div> 
     </li> 
    </ul> 
</div> 

상단 2 개의 사다리처럼 동작하며 역 색상입니다.

.blocker { 
    background-color: blue; 
    height: 0; 
    width:0; 
    right:0; 
    border-bottom: 80px solid red; 
    border-left: 40px solid transparent; 
    border-right: 0px solid transparent; 
    float: right; 
} 

Answer 2

당신은 설정할 수 있습니다 line-height 당신이 그것을 중심으로 원하는 항목의 높이와 동일

: 그럼.

ul div {line-height:80px;}