• 목록

아이콘(<i class="bi bi-badge-hd"></i>)이 텍스트보다 약간 위로 떠보이는 현상은
Bootstrap Icons나 FontAwesome 등에서 자주 발생하는 현상입니다.
이는 아이콘이 inline-block이며, 글꼴의 기준선(baseline)보다 약간 위에 위치하기 때문입니다.

✅ 해결 방법 3가지
✅ 방법 1: vertical-align: middle 추가 (추천)[code]<button class="btn bubbly-btn">
  <i class="bi bi-badge-hd" style="vertical-align: middle;"></i> 고화질 AV영상 다운로드
</button>[/code]
✅ 방법 2: position: relative + 미세 조정[code]<i class="bi bi-badge-hd" style="position: relative; top: 1px;"></i>[/code]필요에 따라 top 값을 1px 또는 2px 정도로 조절하면 됩니다.

✅ 방법 3: 아이콘과 텍스트를 Flex로 정렬
좀 더 정밀하게 맞추고 싶다면 button 내부를 flex로 구성할 수 있습니다[code]<button class="btn bubbly-btn" style="display: flex; align-items: center; gap: 5px;">
  <i class="bi bi-badge-hd"></i>
  고화질 AV영상 다운로드
</button>[/code]🔍 가장 깔끔한 해결책?
간단한 경우엔 vertical-align: middle이 제일 좋습니다.
정밀 정렬이 필요하면 flex 방식이 더 안정적입니다.