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.
我试图垂直对齐我所编码的banner中的文本,但似乎无法找到如何获得显示:table-cell;和vertical-align:中间;去工作。
Below is the code I have used along with a jsfiddle
下面是我与jsfiddle一起使用的代码
HTML:
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:
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:
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;
})
2 个解决方案
#1
7
Try this
试试这个
.tagItem {display: table;}
.tagItem a{height: 80px; display: table-cell; vertical-align: middle;}
.tagItem a without position:absolute;
.tagItem没有位置:绝对;
#2
0
Try this-
试试这个,
.tagItem a{
position:absolute;
top: 35%;
left: 0px;
height: 80px;
right: 0px;
color: rgb(255, 255, 255);
text-decoration:none;
}
#1
7
Try this
试试这个
.tagItem {display: table;}
.tagItem a{height: 80px; display: table-cell; vertical-align: middle;}
.tagItem a without position:absolute;
.tagItem没有位置:绝对;
#2
0
Try this-
试试这个,
.tagItem a{
position:absolute;
top: 35%;
left: 0px;
height: 80px;
right: 0px;
color: rgb(255, 255, 255);
text-decoration:none;
}