在图像上水平和垂直居中（字体真棒）图标[重复]

Posted 2023-03-05

【中文标题】在图像上水平和垂直居中（字体真棒）图标[重复]

【英文标题】：Horizontally and vertically center a (font-awesome) icon over an image [duplicate]

【发布时间】：2019-12-30 18:35:03

【问题描述】：

我需要在图像上覆盖一个麦克风图标（一种水印）。需要此图标水平和垂直居中。图像可能会根据浏览器大小调整大小，但麦克风应始终居中。

以下是我目前所拥有的，但是当调整图像大小时，麦克风图标未调整。

img 
  width: 50%;


.featured-img 
  text-align: center;


.featured-img img 
  border: 1px solid red;


.watermark 
  position: absolute;
  margin: 0 auto;
  left: -80px;
  right: 0;
  top: 20%;
  width: 0%;
  opacity: 0.8;
  color: black;
  font-size: 1000%;

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

<div class="featured-img">
  <img src="https://www.iconsdb.com/icons/preview/red/cat-3-xxl.png">
  <i class="fa fa-microphone fa-5x watermark"></i>
</div>

尝试调整大小，您会发现麦克风放置不正确。

【问题讨论】：

图标垂直居中，添加到 .watermark transform: translateY(-50%);最高：50%； ，为了使其水平居中，.watermark 的宽度应该与伪元素（::before）相同，并将 left 设置为 0 而不是 -80px，check this

【参考方案1】：

将position: relative; 添加到图像并更新图标：

.watermark 
  position: absolute;
  margin: 0 auto;
  left: 50%; //added
  top: 50%; //added
  transform: translate(-50%, -50%); //added
  width: 0%; // removed
  opacity: 0.8;
  color: black;
  font-size: 1000%;

这是你想要的吗？

【参考方案2】：

使用此代码：

.container 
  position: relative;
  width: 100%;
  max-width: 400px;


.image 
  display: block;
  width: 100%;
  height: auto;


.overlay 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;



.icon 
  color: white;
  font-size: 10vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <img src="https://via.placeholder.com/300"  class="image">
  <div class="overlay">
  <a href="#" class="icon" title="User Profile">
   <i class="fa fa-microphone fa-3x watermark"></i>
  </a>
  </div>
</div>

【讨论】：

这非常适合我的需求。谢谢。