I've created a jsfiddle <http://jsfiddle.net/zkLav/> showing the code in action. what's happening is the images and text alignment are step stacking and not aligning vertically. Can anyone explain why this is happening? 

**CSS** markup:

```
.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** markup:

```
<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>​
​

```

A proper image of the problem:

![enter image description here](https://i.stack.imgur.com/U8G5T.jpg)