100 % 너비가 아닌 100 % 너비가 아닌 목록 항목의 세로 가운데 맞춤 텍스트

Question

li에 세로로 텍스트를 가운데 놓고 텍스트를 li 너비의 100 % 미만으로 제한하는 가장 좋은 방법은 무엇입니까?이 경우에는

ul li { 
    height: 40px; 
    line-height: 3em; 
    border-bottom: 1px solid #103d3b; 
    padding-left: 10px; 
    font-size: 13px; 
    background-image: url(images/listarrow.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
} 

<ul> 
    <li>test 1</li> 
    <li>test 2 which is a longer line and needs wrapping</li> 
</ul> 

80 %의 폭 텍스트 주위 사업부를 추가 : 리튬에 라인 높이 (줄 높이 물론 당신이 할 말하고있다) 거대한 줄 간격을 가지고 랩 텍스트가 1em의 line-height는 li의 line-height를 취소하고 li 상자의 맨 위에 (이제 올바르게 랩핑 된) 텍스트를 보냅니다.

내가 원하는 것은 텍스트 줄 바꿈 여부에 관계없이 텍스트 블록을 세로로 가운데에 정렬하고 일반 줄 높이를 지정하는 것입니다.

아이디어가 있으십니까?

유일한 대상은 사파리에서만 작동하는 솔루션을 사용할 수 있도록 모바일 사파리 (iPhone, iPad 외)입니다. Javascript에서 이것을 수행하고 싶지는 않습니다. 큰 목록에 매우 해를 끼칠 수 있기 때문입니다.

감사

무

Answer 1

이 조금 오버 단순하지만, 왜 그냥 li에 높이를 제거하고 모든 것을 달성하기 위해 패딩을 사용할 수있다?

ul li { 
    line-height: 1.2em; // standard, good-looking line-height 
    border-bottom: 1px solid #103d3b; 
    padding: 10px 40px 10px 10px; // padding to accomplish top/bottom spacing (so it's always even) and spacing on right 
    font-size: 13px; 
    background-image: url(images/listarrow.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
} 

이 경우 모든 개체에 대해 동일한 행 높이를 얻지 못할 것이라는 것을 깨달았지만 여전히 더 좋아 보일 것입니다. 정확한 행 높이를 유지하는 것이 중요하다면 WebKit에서 동적 인 수직 중심 맞춤을 구현하는 가장 쉬운 방법은 위에서 설명한대로 높이를 li, 넓이를 #wrapper으로 유지하는 것입니다.

ul li { 
    display:table; 
} 
ul li div#wrapper { 
    display:table-cell; 
    vertical-align:middle; 
}