在 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，过去 Bootstrap，看起来像这样：

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

对视频缩略图的内部 html 使用垂直对齐：

.video-thumbnail i, .video-thumbnail img{
   display: inline-block !important;
   vertical-align: middle;
}

Answer 2

绝对定位可能是门票。

.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

Answer 3

看看 CSS transform，它非常适合将未知大小的元素居中。

浏览器支持IE9+

JSFIDDLE DEMO

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

在 div 中的 img 上垂直居中一个字形

Vertically center a glyphicon over an img in a div

html

css

twitter-bootstrap

glyphicons

注意

我试过的