图像顶部的中心离子图标

Question

通读 Center a Font Awesome icon over the image on hover 及其相应的答案后，我仍然无法使用 Ionic Icon 复制此答案。

我使用的代码如下：

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

图像顶部的中心离子图标

Center Ionic icon on top of image

css

center

ionic-framework

ionic