图像顶部的中心离子图标

Question

在将鼠标悬停在图像上方的“居中显示一个真棒字体”图标及其相应的答案之后，我仍然很难用离子图标复制此答案。

我使用的代码如下：

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

我正在使用的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%);
}

我已经将其相互叠加，但是似乎找不到中间点。 希望水平和垂直居中。 我不是在寻找任何悬停状态，只是在图像上有一个明显的图标。

谢谢！

Answer 1

对于水平和垂直居中，

您需要删除position: absolute ，因为它会将其从流程中删除。
使用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