Geek Answers Handbook

Center the glyphicon vertically over the img in the div

I have div, in which there is glyphiconand img. The image is a thumbnail for the video, and I would like to place the play icon vertically and horizontally on top of this thumbnail. The markup is as follows:

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

lesswhich I applied past Bootstrap looks like this:

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

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

The calculated cssfor is video-thumbnailas follows:

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;

The calculated cssfor is glyphiconas follows:

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

The calculated cssfor is imgas follows:

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;

Note

I need this to work on mobile devices, so I don't mind applying the actual size to the thumbnail. Videos will be recorded in 720p format, but it really doesn't matter, because it's just a thumbnail.

What i tried

I tried to install vertical-align: middleon video-thumbnailand glyphicon; together and exclusively.

line-height: 100% video-thumbnail vertical-align: middle .

, , , .

?

+4
3

.

.video-thumbnail {
    position: relative;
}
.video-thumbnail .glyphicon {
    position: absolute;
    top: 50%;
    margin-top: -10px; /* half icon height */
    left: 50%;
    margin-left: -10px; /* half icon width */
    z-index: 999;
}

+6

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;
}
+2

Use vertical alignment for internal html video thumbnail:

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

More articles:


All Articles