CODEWITHSUNDEEP
cssionic-frameworkcenter
Stephen C
Stephen C

Reputation: 863

Center Ionic icon on top of image

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!

Upvotes: 2

Views: 10713

Answers (1)

m4n0
m4n0

Reputation: 32255

For horizontal and vertical centering,

  1. You need to remove position: absolute for the image since it takes it out of the flow.
  2. 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>

Upvotes: 6

Related Questions