css - 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

好的，看看这个更新

只需删除下一个 .css 类中的宽度：

.outList img {
    width: 100%;
}

更新

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

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

检查此新更新

Answer 2

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

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

---

当您这样做时，将 ul 作为表，将 li 作为行，然后将 a 中的内容作为列。