我正在尝试使用自定义图标(其中 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>
最佳答案
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/