圖像頂部的中心離子圖標

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