我有div，其中包含glyphicon和img。图像是视频的缩略图，我希望将播放图标垂直和水平放置在该缩略图的顶部。标记看起来像这样：
<div class="container">
<div class="col-sm-12">
<h2>{{video.title}}</h2>
<p>{{video.description}}</p>
<div class="video-thumbnail"> <--- ITEM OF INTEREST
<i class="glyphicon glyphicon-play-circle"></i>
<img ng-src="{{video.thumbnail}}" alt="{{video.title}}" class="img-thumbnail img-responsive center-block"/>
</div>
</div>
</div>
我通过Bootstrap应用的less看起来像这样：
featured-video {
.video-thumbnail {
text-align: center;
&>.glyphicon-play-circle {
font-size: 500%;
}
}
}
css的计算video-thumbnail如下所示：
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: source-sans-pro, sans-serif;
font-size: 14px;
height: 818.328125px;
line-height: 20px;
text-align: center;
width: 1110px;
css的计算glyphicon如下所示：
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline-block;
font-family: 'Glyphicons Halflings';
font-size: 70px;
font-style: normal;
font-weight: normal;
height: 70px;
line-height: 70px;
position: relative;
text-align: center;
top: 1px;
width: 70px;
css的计算img如下所示：
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(221, 221, 221);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: source-sans-pro, sans-serif;
font-size: 14px;
height: 743.328125px;
line-height: 20px;
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-align: center;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-in-out;
vertical-align: middle;
width: 1110px;
我确实需要这个才能在移动设备上运行，因此我对将实际尺寸应用于缩略图感到谨慎。视频将以720p录制，但这真的不重要，因为这只是一个缩略图。
我尝试在vertical-align: middle和video-thumbnail上设置glyphicon;合起来。
我已尝试在line-height: 100%上设置video-thumbnail以及vertical-align: middle并且没有任何效果。
我尝试了其他一些没有任何影响的随机修改，但也没有像前面提到的那样有条不紊。
我在这里做错了什么？
答案 0 :(得分：6)
绝对定位可能是门票。
.video-thumbnail {
position: relative;
}
.video-thumbnail .glyphicon {
position: absolute;
top: 50%;
margin-top: -10px; /* half icon's height */
left: 50%;
margin-left: -10px; /* half icon's width */
z-index: 999;
}
<强> Demo
答案 1 :(得分：2)
看看CSS transform，它适用于居中未知大小的元素。
浏览器支持IE9 +
.video-thumbnail {
position: relative;
}
.glyphicon-play-circle {
font-size: 500%;
position: absolute;
left: 50%; top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
}
答案 2 :(得分：0)
对video-thumbnail的内部html使用vertical-align：
NSCalendar *calendar = [NSCalendar calendarWithIdentifier:NSCalendarIdentifierISO8601];
NSDate *date = [NSDate date];
// find the next Wednesday 6 o'clock
date = [calendar dateBySettingUnit:NSCalendarUnitSecond value:0 ofDate:date options:0];
date = [calendar dateBySettingUnit:NSCalendarUnitMinute value:0 ofDate:date options:0];
date = [calendar dateBySettingUnit:NSCalendarUnitHour value:18 ofDate:date options:0];
date = [calendar dateBySettingUnit:NSCalendarUnitWeekday value:4 ofDate:date options:0];
// skip one week if it's not an even week
NSDateComponents *components = [calendar components:NSCalendarUnitWeekOfYear fromDate:date];
date = [calendar dateByAddingUnit:NSCalendarUnitWeekOfYear value:components.weekOfYear % 2 toDate:date options:0];
// 15 weeks of this
for (int i = 0; i < 15; i++)
{
NSDate *testDate = [calendar dateByAddingUnit:NSCalendarUnitWeekOfYear value:i * 2 toDate:date options:0];
NSLog(@"Date: %@", testDate);
}