css垂直對齊，奇怪的結果

Question

我創建了一個jsfiddle http://jsfiddle.net/zkLav/顯示代碼正在執行。發生了什麼是圖像和文字對齊是步驟堆疊和不垂直對齊。任何人都可以解釋爲什麼會發生？

CSS標記：

.outList { 
    display:table; 
} 
.outList span { 
    display:table-cell; 
    vertical-align:middle; 
    width:10%; 
} 
.outList h4 { 
    display:table-cell; 
    vertical-align:middle; 
    width:50%; 
    padding-left: 10px; 
} 
.outList p { 
    float:right; 
    display:table-cell; 
    vertical-align:middle; 
    /*width:30%;*/ 
    text-align:right; 
} 
.outList img { 
    width:100%; 
} 

HTML標記：

<ul> 
    <li data-theme="c"> 
    <a href="detail.html"> 
     <div class="outList"> 
      <span><img src="simgs/listview_chk.png" /></span> 
      <h4>Warmup</h4> 
      <p>5 Minutes</p> 
     </div>        
    </a>     
    </li> 

    <li data-theme="c"> 
    <a href="detail.html"> 
     <div class="outList"> 
      <span><img src="simgs/listview_chk.png" /></span> 
      <h4>Machine Press</h4> 
      <p>3 sets of</p> 
     </div>        
    </a>     
    </li> 

    <li data-theme="c"> 
    <a href="detail.html"> 
     <div class="outList"> 
      <span><img src="simgs/listview_chk.png" /></span> 
      <h4>Lateral Pulldowns</h4> 
      <p>3 sets of</p> 
     </div>        
    </a>     
    </li> 
</ul>​ 
​ 

的問題進行適當的形象：

Answer 1

好吧，看看this update

只需卸下寬度在未來的CSS類：在被完全對準右側

.outList img { 
    width: 100%; 
} 

UPDATE

對於文本，請從p類中刪除float:right;：

.outList p { 
    float:right; 
    display:table-cell; 
    vertical-align:middle; 
    /*width:30%;*/ 
    text-align:right; 
} 

Check this new update

Answer 2

擺脫divs，你不需要他們，因爲你有李的。

另外，爲什麼跨越img？擺脫這一點。

---

當你這樣做時，把ul作爲表，把li作爲行，然後把a作爲列。