Vertically align text middle in div element CSS

Question

I'm trying to vertically align the text in my banner I've coded but can't seem to work out how to get the display:table-cell; and vertical-align:middle; to work.

Below is the code I have used along with a 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;
})

Answer 1

Try this

.tagItem {display: table;}

.tagItem a{height: 80px; display: table-cell; vertical-align: middle;}

.tagItem a without position:absolute;