Question

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:

Answer 1

Ok, take a look at this update

Just remove the width in the next .css class:

.outList img {
    width: 100%;
}

UPDATE

For the text at the right to be fully align, remove the float:right; from the p class:

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

Check this new update