Center Ionic icon on top of image

Question

After reading through Center a Font Awesome icon over the image on hover and it's corresponding answers, I'm still having trouble replicating this answer with an Ionic Icon.

Code I'm using is as follows:

<div class="video-thumbnail">
  <img src="image here" />
  <i class="icon ion-play"></i>
</div>

CSS I'm using is:

.video-thumbnail {
  position: relative;
  margin: 0 auto;
  display: inline-block;
}

.video-thumbnail img {
  position: absolute;
}

.video-thumbnail i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

I've got it to go on top of each other but can't seem to find the middle point. Looking to center horizontally and vertically. I'm not looking for any hover states just a blatant icon over image.

Thanks!

Answer 1

For horizontal and vertical centering,

You need to remove position: absolute for the image since it takes it out of the flow.
Calculate the top and left values using calc() , you will need to subtract the dimension values of the icon from 50%.

 angular.module('app', ['ionic']);

 .video-thumbnail { position: relative; display: inline-block; } .video-thumbnail img { width: 100px; height: 100px; } .video-thumbnail i { position: absolute; top: calc(50% - 10px); left: calc(50% - 5px); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> </head> <body ng-app="app"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Awesome App</h1> </ion-header-bar> <ion-content class="padding"> <div class="video-thumbnail"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2KjQI_sGhxCm5CTyQPuCACLuLEyvup4eDNVowMzdHiiPLShdL3ggiA7QC" /> <i class="icon ion-play"></i> </div> </ion-content> </ion-pane> </body>

Center Ionic icon on top of image

Question

1 answers

solution1
3 ACCPTED 2015-08-27 20:05:34

Center Ionic icon on top of image

Question

1 answers

solution1 3 ACCPTED 2015-08-27 20:05:34

solution1
3 ACCPTED 2015-08-27 20:05:34