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

概述我有一个div,里面有一个glyphicon和一个img.图像是视频的缩略图,我想将播放图标垂直和水平放置在该缩略图的顶部.标记看起来像这样： <div class="container"> <div class="col-sm-12"> <h2>{{video.title}}</h2> <p>{{video.description}}</p> 我有一个div,里面有一个glyphicon和一个img.图像是视频的缩略图,我想将播放图标垂直和水平放置在该缩略图的顶部.标记看起来像这样：

<div >    <div >        <h2>{{vIDeo.Title}}</h2>        <p>{{vIDeo.description}}</p>        <div >  <--- ITEM OF INTEREST            <i ></i>            <img ng-src="{{vIDeo.thumbnail}}" alt="{{vIDeo.Title}}" />        </div>    </div></div>

通过bootstrap,我应用的越少,看起来像这样：

featured-vIDeo {  .vIDeo-thumbnail {    text-align: center;    &>.glyphicon-play-circle {      Font-size: 500%;    }  }}

视频缩略图的计算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);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);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);border-left-style: solID;border-left-wIDth: 1px;border-right-color: rgb(221,221);border-right-style: solID;border-right-wIDth: 1px;border-top-color: rgb(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,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录制,但这真的无关紧要,因为这只是一个缩略图.

我试过的

我试过在视频缩略图和glyphicon上设置vertical-align：mIDdle;一起而且独家.

我已经尝试在视频缩略图上设置行高：100％以及vertical-align：mIDdle并且没有任何效果.

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

我在这做错了什么？

解决方法 绝对定位可能是票.

.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

总结

以上是内存溢出为你收集整理的html – 将一个glyphicon垂直居中于div中的img全部内容，希望文章能够帮你解决html – 将一个glyphicon垂直居中于div中的img所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。