我在父 div 中有一個 Font Awesome 圖標，display: flex它本身位于容器 div 內display: flex。當我嘗試transform: scale(1.2)懸停時，它會稍微推動該元素：https://jsfiddle.net/Daniel_Knights/gptyo3be/5/.container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}.parent { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px;}i { cursor: pointer; transition: transform 0.2s;}i:hover { transform: scale(1.2);}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"><div class="container"> <div class="parent"> <i class="fa fa-eye" id="single-item-eye"></i> </div></div>有什么想法可能是為什么嗎？
1 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
使用 SVG 版本就不會出現此問題?？s放 SVG 比縮放文本更好：
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
}
svg {
cursor: pointer;
transition: transform 0.2s;
}
svg:hover {
transform: scale(1.2);
}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<div class="container">
<div class="parent">
<i class="fa fa-eye" id="single-item-eye"></i>
</div>
</div>
- 1 回答
- 0 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消