html - div要素のCSSでテキストを中央に垂直に揃えます

Question

コード化したバナーのテキストを垂直方向に揃えようとしていますが、display:table-cell; を取得する方法がわかりません。および垂直方向の位置合わせ:中央; 仕事に。

以下は、私がjsfiddleと共に使用したコードです

HTML:

<div class="banner">
    <div>
        <img src="#" alt="Image 1" width="650" height="326" class="bannerImg item1 selectedImg" />
        <img src="#" alt="Image 2" width="650" height="326" class="bannerImg item2" />
        <img src="#" alt="Image 3" width="650" height="326" class="bannerImg item3" />
    </div>
    <div class="bannerTags">

        <div class="tagItem tag1 selectedTag">
            <a href="#">Item 1</a>
        </div>
        <div class="tagItem tag2">
            <a href="#">Item 2</a>
        </div>
        <div class="tagItem tag3">
            <a href="#">Item 2</a>
        </div>
    </div>
</div>

CSS:

.banner{width:650px; height:326px; background-color:#000000; position:relative; overflow:hidden;}
.bannerTags{text-align:center; width:650px; height:80px; position:absolute; bottom:0px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), to(rgba(0,0,0,0.7))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
    background: -o-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7));}
.tagItem{width:217px; height:80px; float:left; position:relative;display:inline-block}
.tagItem a{position:absolute; top: 0px; left: 0px; height: 80px; vertical-align: middle; right: 0px;bottom: 0px; color: rgb(255, 255, 255); text-decoration:none;}
.selectedTag{width:216px !important; height:80px; background-color:#d7df23;}
.selectedTag a{color:#000000 !important; display:table-cell; vertical-align:middle;}
.bannerImg{display:none;}
.selectImg{display:block;}  
.clr{clear:both;}
.bannerArrow{width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #d7df23 transparent; position:absolute; bottom:80px; left:108px; margin-left:-10px;}

jQuery:

var bannerPause = 0;
var bannerValue = 1;
var tagValue = 1;
var hoveredTag;

$('.item1').show();
$('.selectedTag').append('<div class="bannerArrow"></div>');

setInterval(function(){
    if(bannerPause == 0){
        $('.bannerArrow').remove();
        $('.tagItem').removeClass('selectedTag');
        if(bannerValue == 3){
            bannerValue = 1;
            tagValue = 1
        }else{
            bannerValue += 1;
            tagValue += 1;
        }
        $('.bannerImg').hide();
        $('.item'+bannerValue).show();
        $('.tag'+tagValue).addClass('selectedTag');
        $('.selectedTag').append('<div class="bannerArrow"></div>');
    }else{}
},5000);


$('.tag1').mouseenter(function(){   
    bannerValue = 1;
    tagValue = 1;
    $('.bannerArrow').remove();
    $('.tagItem').removeClass('selectedTag');
    $('.bannerImg').hide();
    $('.item'+bannerValue).show();
    $('.tag'+tagValue).addClass('selectedTag');
    $('.selectedTag').append('<div class="bannerArrow"></div>');
})

$('.tag2').mouseenter(function(){   
    bannerValue = 2;
    tagValue = 2;
    $('.bannerArrow').remove();
    $('.tagItem').removeClass('selectedTag');
    $('.bannerImg').hide();
    $('.item'+bannerValue).show();
    $('.tag'+tagValue).addClass('selectedTag');
    $('.selectedTag').append('<div class="bannerArrow"></div>');
})

$('.tag3').mouseenter(function(){   
    bannerValue = 3;
    tagValue = 3;
    $('.bannerArrow').remove();
    $('.tagItem').removeClass('selectedTag');
    $('.bannerImg').hide();
    $('.item'+bannerValue).show();
    $('.tag'+tagValue).addClass('selectedTag');
    $('.selectedTag').append('<div class="bannerArrow"></div>');
})

$('.tagItem').mouseenter(function(){   
    bannerPause = 1;
})
$('.tagItem').mouseleave(function(){
    bannerPause = 0;
})