Вертикально выровнять текст по центру в элементе div CSS

Question

Я пытаюсь вертикально выровнять текст на своем баннере Я закодировал, но не могу понять, как получить дисплей: 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; 
}) 

Answer 1

Попробуйте

.tagItem {display: table;} 

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

.tagItem А без позиции: абсолютный;

Answer 2

Try this-

.tagItem a{ 
    position:absolute; 
    top: 35%; 
    left: 0px; 
    height: 80px; 
    right: 0px; 
    color: rgb(255, 255, 255); 
    text-decoration:none; 
}