CSS : 세로로 정렬 부동 소수점을 사용하여 아이콘 옆에있는 텍스트

Question

아이콘/이미지 옆에 텍스트를 정렬하려고합니다. 텍스트 또는 이미지를 세로로 정렬하려고하지만 세로 맞춤이 적용되지 않도록하려면, ---

---- HTML을 : 여기

내가 지금까지 무엇을 : 그것은 여기

이미지가 내가 원하는 것을 explainng 년대 수레 함께 할 수있는 뭔가가있을 수 있습니다

<ul class="toolboxItems"> 
    <li> 
     <div class="image"> 
      <img src="someImage.png"> 
     </div> 

     <div class="label"> 
      <label>Lorem ipsum dolor sit amet....</label> 
     </div> 
    <li> 

    <li> 
     /* more of the same .... */ 
    </li> 
<ul> 

---- CSS ----

내가 디스플레이 사용하여 시도

ul.toolboxItems li {margin-bottom:10px;} 
.image {float:left; width:30px;} 
.label {float:left; width:150px; vertical-align:middle;} 

: 테이블/테이블 셀을하지만 그것은 작동하지 않았다.

Answer 1

supported in everything (IE 7 이하 포함)의 CSS 표 표시 속성을 사용할 수 있습니다. 여기

근무 데모 : http://jsfiddle.net/Hgssm/1/

.toolboxItems { 
    display: table; 
} 

.toolboxItems li { 
    display: table-row; 
} 

.toolboxItems .image, 
.toolboxItems .label { 
    display: table-cell; 
    width: 30px; 
    vertical-align: middle; 
} 

.toolboxItems .label { 
    width: 150px; 
}