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 の中央に配置) が必要な場合は、次の 2 つの方法をお勧めします。

JS を使用するか、LI を TD に変換します。