垂直对齐图像旁边的跨距

Question

我正在尝试构建一个<ul>条目结构，如下所示：

如图所示，红色框为<li>.

此外，如果我动态移除位于图片旁边的底部<span>，我希望顶部<span>垂直居中（当然，在图片旁边）。

我尝试过把所有东西都变成块状，然后玩宽度和高度，但我想知道那里是否有一个“更干净”的版本。

非常感谢！

修改

My current code:

HTML：

<ul>
<li>
    <span><img src="http://ctelab.berkeley.edu/Images/image%202_use.jpg" /></span>
    <span>Text1</span>
    <span>Text2</span>
    <span>Text3</span>
</li>
</ul>​

CSS：

li{
    border: 1px solid red;
    padding: 20px;
}
span:first-child{
    display: inline-block;
    width: 120px; 
    height: 120px; /* width and height of the image*/
    vertical-align: middle;
}
span{
    border: 1px dashed green;
}​

Answer 1

据我所知，只有TD元素支持垂直对齐没有别的。如果你想垂直对齐（在LI的中间定位SPAN），我建议你采用两种方式：

使用JS或将您的LI转换为TD。