在 CSS 中垂直居中文本于 div 元素

Question

我试图在我编写的横幅中垂直对齐文本，但似乎无法弄清如何使display:table-cell;和vertical-align:middle;生效。

以下是我使用的代码以及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;
})

- huddds

---

看看这个fiddle，看看它是否有帮助。我只是在.tagItem a中添加了top: 40%;。 - Harry

可能是重复的问题：CSS - Vertical align table-cell don't work with position absolute - Pete

这样做不行，因为有时候它会变成两行。无论如何还是谢谢。 - huddds

.tagItem a { line-height: 5; } 或者上下填充也可以。 - Xareyo

Answer 1

试试这个

.tagItem {display: table;}

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

没有设置 position:absolute 的 .tagItem a 元素;

- Mary Tarasenko

Answer 2

试试这个 -

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

- Arif Khan

---

我已经格式化了代码并将它们分成多行。希望你没有任何问题。 - Harry