canvas가 text-align 속성에 영향을 받는 이유

-상황-

canvas가 왼쪽 오른쪽 마진이 엄청 들어가서 표시되는 문제 발생

보니까 뭔가 중앙에 표시되고 있는 것 같다.

F12 누르고 이것저것 CSS를 막 넣었다 뺐다 해보다가 text-align:center라고 돼있는 부분을 빼니까 갑자기 제대로 나옴

왜지? 하고 찾아보니 canvas가 inline 요소이기 때문에 img, input 태그처럼 text-align에 영향을 받는다고 한다.

https://stackoverflow.com/questions/45406873/why-does-text-align-have-an-effect-on-canvas

Why does text-align have an effect on canvas?

 

-사실 1-

기본적으로 text-align 속성같은건 inherit 값을 갖고 있기 때문에

최상단 element에서 text-align : center라고 설정되어 있으면 그 자식들은 모두 영향을 받는다.

 

-사실 2-

display:inline 인 태그는 text-align에 영향을 받는다.

 

-해결-

text-align은 컨테이너에 적용하는 속성이므로 canvas가 들어있는 부모 div에 text-align:left를 줬다.