html - 将字形图标垂直居中放置在 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>

我在 Bootstrap 之后应用的 less 看起来像这样:

featured-video {
  .video-thumbnail {
    text-align: center;

    &>.glyphicon-play-circle {
      font-size: 500%;
    }
  }
}

video-thumbnail 的计算 css 如下所示:

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;

glyphicon 的计算 css 如下所示:

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

img 的计算 css 如下所示:

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 录制，但这真的不重要，因为这只是一个缩略图。

我尝试过的

我尝试在 video-thumbnail 和 glyphicon 上设置 vertical-align: middle；一起并排他地。

我尝试在 video-thumbnail 上设置 line-height: 100% 以及 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;
}

Demo