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%;
}

<强>更新

要使文本在右侧完全对齐，请从float:right;类中删除p：

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

Check this new update

Answer 2

摆脱div，你不需要它们，因为你有李的。

另外，为什么要跨越img？摆脱它。

---

当你这样做时，把ul作为表，把li作为行，然后将a中的东西作为列。