html - 旁边带有文本的图标

Question

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

我已经尝试了多个代码，但似乎没有一个在 Sharepoint 中有效。

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

Answer 1

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>