将一个glyphicon垂直居中于div中的img

Question

我有一个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>

在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,但这并没有任何影响.

我已经尝试了另外一些没有任何影响的随机修改,但也没有像前面提到的那样有条不紊.

我在这做错了什么？

Answer 1

绝对定位可能是票.

.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;
}

演示