html - 文字旁边的图标

我正在尝试使用自定义图标（其中3个）位于表中自己的单元格中，而这些单元格旁边的单元格就是与它们一起出现的文本。我希望文字接近图像。当图像悬停在上方时，图像将略微放大，因为它也是超链接。我似乎无法获得代码来确保其对齐页面中心并正确设置格式。当我将其设置为在悬停时放大时，比例尺也不起作用。

我已经尝试了多种代码，但是似乎都没有在共享点内工作。

.demo-problem,
.demo-solution {
  font-size: 1.5em;
}

body {
  padding: 30px;
}

.outer-div {
  padding: 30px;
}

.inner-div {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.demo-solution--flexbox {
  display: flex;
  align-items: center;
}

img3 {
  width: 25%;
  height: auto;
  display: block;
}

img3:hover {
  transform: scale(3);
}

a:hover {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

<div class="demo-solution demo-solution--flexbox">
  <div class="outer-div">
    <a href="#" target="_blank"><img src="https://ontariopowergeneration.sharepoint.com/:i:/r/sites/powernet/support/res/PublishingImages/Pages/Real%20Estate/Icons/ICON_Real-Estate.png?csf=1&e=acVaiZ" alt="" class="img3"></a>
  </div>
  <div class="inner-div"><span><blockquote>Corporate Real Estate & Workplace</blockquote></span></div>
</div>

最佳答案

img3是一个类，因此您需要指定
.img3，而您只完成了img3。
如果将其更改为.img3，则比例尺有效

.demo-problem,
.demo-solution {
  font-size: 1.5em;
}

body {
  padding: 30px;
}

.outer-div {
  padding: 30px;
}

.inner-div {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.demo-solution--flexbox {
  display: flex;
  align-items: center;
}

.img3 {
  width: 25%;
  height: auto;
  display: block;
}

.img3:hover {
  transform: scale(3);
}

a:hover {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

<div class="demo-solution demo-solution--flexbox">
  <div class="outer-div">
    <a href="#" target="_blank"><img src="https://www.slipperelectrical.co.nz/wp-content/uploads/2015/12/dummy-image.jpg" alt="" class="img3"></a>
  </div>
  <div class="inner-div"><span><blockquote>Corporate Real Estate & Workplace</blockquote></span></div>
</div>

关于html - 文字旁边的图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57418019/