centrowanie tekstu (2 linie) w pionie

[jingels]

Witam.
Potrzebuje wycentrować w pionie elementy span. Problem polega na tym, że niektóre z tekstów są w dwóch liniach. Gdyby były jedno-wierszowe sprawa była by prosta, wystarczyłoby zastosować line-height. Zależy mi na tym aby wszystkie teksty w div text_wrapper znajdowały się na środku w pionie, niezależnie od ilości wierszy. Proszę o pomoc. Męczę się z tym już kilka godzin. Skończyły mi się pomysły.

Kod:

<div id="img_title">
    <div class="text_wrapper">
        <span class="text active">Ekspertyzy budowlane</span>
        <span class="text">Opinie sądowe<br />i przedsądowe</span>
        <span class="text">Konsultacje budowlane</span>
        <span class="text">Interpretacje Ustawy<br /> Prawo Budowlane</span>
        <span class="text">Ekspertyzy budowlane<br />&amp; Management</span>
    </div>
</div>
<style>
#img_title { position: absolute; top: 0; left: 0; height: 181px; width: 494px; display: table; background: url(../images/img_titlel_bg.png) top left no-repeat; z-index: 18;}
#img_title .text_wrapper { position: relative; vertical-align: middle; display: table-cell; border: 1px solid #333; z-index: 19; text-align: center;}
#img_title .text_wrapper .text {  position: absolute; left: 1px; font-size: 24px; height: 54px; color: #808080; background-color: #fff; width: 492px;  z-index: 20; opacity: 0.0;}
#img_title .text_wrapper .text.active { z-index: 22; opacity: 1.0;}
#img_title .text_wrapper .text.last-active { z-index: 21;}
</style>

Kod PHP:

<script>
function slideSwitchText() {
   var $active = $('.text_wrapper span.active');

    if ( $active.length == 0 ) $active = $('.text_wrapper span:last');

    var $next =  $active.next().length ? $active.next()
        : $('.text_wrapper span:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });

}

$(function() {
    setInterval( "slideSwitchText()", 2000 );
});
</script> 


[Kartofelek]

Vertical align działa inaczej niż w komórkach. W komórkach po prostu centruje w pionie. W przypadku innych bloków centruje elementy WZGLĘDEM siebie.
Dajesz więc vertical-align, display:inline-block
Jeżeli będziesz chciał wycentrować względem nadrzędnego elementu, musisz dodać jeden span, który ma height:100%; width:0px; display:inline-block

[jingels]

Dzięki za odpowiedź. Udało mi się naprawić wyświetlanie w następując sposób:
dodałem dodatkowy span wewnątrz span.text. Następnie span.text { display: table} i span { display: table-cell, vertical-align: middle;}