Выровнять по вертикали <span>или <div>

Question

Мне нужно центрировать текст внутри тега <div> или <span>.
Я установил display:table-cell.Это сработало.
Но я хочу оживить его (используя jQuery).Но это не работает, потому что дисплей установлен на display:block.Я не хочу этого, потому что это не отображается должным образом.

Кто-нибудь знает способ сделать это?

(Скажите, если вам нужен код, который я использовал.)

<div id="container">
<ul>
<li id="1">
    <span id="spanimg1">Lorem Ipsum</span>
    <img id="img1" src="1.jpg" />        
</li>
<li id="2">
    <span id="spanimg2">Lorem Ipsum</span>
    <img id="img2" src="2.jpg"/>        
</li>
<li id="3">
    <span id="spanimg3">Lorem Ipsum</span>
    <img id="img3" src="3.jpg"/>        
</li>
</ul>
</div>

<style>
#container {
width: 400px;
height: 400px;
position:relative;
margin: auto;
vertical-align:middle;
}

li {
margin: 0;
padding: 0;
}

ul {
margin: 0;
padding: 0;
list-style-type:none;
}
li span {
position:relative;
background:black;
width:400px;
height:80px;
text-align:center;
color:white;
display:none;
z-index:1000;
vertical-align:middle;
}
img {
position:absolute;
display:none;
}
.showimg {
display:block;
}
.show {
display:table-cell;
vertical-align:middle;
position:absolute;
}
</style>

Answer 1

Обновление до jQuery 1.4.3 или более поздней версии получило поддержку table-cell отображения в анимации.

Answer 2

РЕДАКТИРОВАНИЕ: Теперь я вижу, что вы опубликовали свой код с фиксированной высотой.Просто добавьте это к тегу "li span", и он должен центрировать весь текст по вертикали.

line-height: 80px;