CSS - 버튼위에 아이콘 올리기

<버튼위에 아이콘 올리기>

 

 

 

HTML)


<span class="voice_button_box">
        <input class="voice_button" type="button">
        <i class="fa-solid fa-microphone"></i>
</span>





CSS 코드)


.voice_button_box{
position:relative;
}


.fa-microphone{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,50%);
}

css에서

 

top:50%;
left:50%;

 

만 쓸 경우, 아이콘의 왼쪽 상단 모서리가 가운데로 배치된다

 

왜냐하면 

 

top:50%; 는 상단 모서리가 가운데로 위치,

left:50%; 는 왼쪽 모서리가 가운데로 위치 되기 때문이다 

 

그래서 이 코드만 쓰면 아이콘이 정확한 가운데로 정렬되지는 않는다 

 

 

 

transform: translate(-50%, -50%);

 

그래서

 

이코드를 통해 요소의 기준점을 왼쪽 위가아니라 가운데로 옮겨놔야한다.

 

그래야 아이콘의 중앙지점이 부모태그의 중앙으로 가서 더 정확한 가운데정렬이된다