CSS : 각 목록 요소 앞에 숫자/글 머리표를 세로로 정렬하는 방법이 있습니까?

Question

각 li 요소에 이미지와 텍스트 블록이 포함 된 번호 매기기 목록을 만들려고합니다. 목록 번호, 이미지 및 텍스트 블록은 모두 수평 중심선을 따라 수직으로 정렬되어야합니다. 텍스트 블록은 여러 줄이 될 수 있습니다. 여기에 매우 거친 그림입니다 :

내가 달성 한 가장 가까운이 (크롬 15, 파이어 폭스 8, IE9에서 테스트) 아래에있는 목록 번호를 정렬 다음이다. jsfiddle mockup도 참조하십시오.

<style type="text/css"> 
    li div { display: inline-block } 
    li div div { display: table-cell; vertical-align: middle } 
</style> 

<ol> 
<li><div><div><img src=widget.png></div><div>Caption Text Here</div></div></li> 
</ol> 

넘버링을 직접 제공하지 않으면 플랫폼 간 방법이 있습니까?

을 편집하십시오. 한 가지 더 요구 사항 : 컨테이너 너비가 매우 작은 경우 (예 : 휴대 기기에서 볼 때) 텍스트 블록은 이미지 오른쪽에 있어야합니다. 이미지 주위에는 텍스트 둘러싸 기가 없어야합니다.

Answer 1

음, 실제로 달성하기가 너무 어렵지 않아야합니다. 모든 요소가 중간에 세로로 정렬되어 있는지 확인하십시오.

HTML :

<ol> 
    <li><img src="widget.png" alt /> <p>Caption Text Here</p></li> 
</ol>  

CSS :

ol { 
    white-space: nowrap; 
    padding: 0 40px; } 
li img { 
    vertical-align: middle; 
    display: inline-block; } 
li p { 
    white-space: normal; 
    vertical-align: middle; 
    display: inline-block; } 

미리보기 : 자동 폭 멀티 라인 텍스트 블록으로 http://jsfiddle.net/Wexcode/uGuD8/1/

: 멀티 라인 텍스트 블록으로 http://jsfiddle.net/Wexcode/uGuD8/

: http://jsfiddle.net/Wexcode/uGuD8/11/