html - 在图像旁边垂直对齐跨度

Question

我正在尝试构建一个<ul>像这里描述的那样的入口结构：

如图所示，红框是<li>.

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

我已经尝试将所有内容都变成块并使用宽度和高度，但我想知道那里是否有“更清洁”的版本。

非常感谢！

编辑：

我当前的代码：

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 元素支持垂直对齐。如果您想要垂直对齐（将 SPAN 定位在 LI 的中间），我建议您采用两种方式：

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