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

для текста на право быть полностью выравнивать , удалите float:right; от p класс:

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

Check this new update

Answer 2

Избавьтесь от divs, вам они не нужны, если у вас есть лики.

Кроме того, зачем охватывать img? Избавься от этого тоже.

---

Когда вы сделали это, поставить ул как таблицы, Ли в качестве строк, а затем вещи в а, как и столбцы.