图像顶部的中心离子图标

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: 我正在使用的CSS是：

.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. 您需要删除position: absolute ，因为它会将其从流程中删除。
Calculate the top and left values using calc() , you will need to subtract the dimension values of the icon from 50%. 使用calc()计算顶部和左侧的值，您需要从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>

图像顶部的中心离子图标

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-08-27 20:05:34

图像顶部的中心离子图标

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-08-27 20:05:34

解决方案1
3 已采纳 2015-08-27 20:05:34