css) 버튼이 중앙으로 가지 않을 때

 

버튼이 중간으로 가지 않았던 이유....

 

하 ㅠㅠ 너무 답답했다.

button을 만들고, margin : auto를 주었는데도,

이놈의 버튼은... 움직이지 않았다 ㅠㅠㅠㅠㅠㅠㅠ

 

왜 이렇게 안 움직이는 것일까..

 

너무 답답했다. 

 

근데... 정말 허무하게 회사의 프론트 개발자분의 한 줄로 끝나버렸다.

 

display: block; 

 

... 뭐야?? 어리둥절 하고 있는 나에게

친절하게 html의 태그들의 type은 3가지라고 이야기 해주었다.

 

inline와 block 그리고 inline-block 

 

기본적으로 block은 우리가 보는 화면은 한 줄을 차지하고 표시하고자 하는 것을 나타내고

inline은 한 줄을 다 차지하고 나타내지 않고, 다른 것들과 속해서 나타나게 된다.

 

block의 예시로는 P태그를 바로 생각해보면 될 것 같고, h태그 들도 모두 한 줄씩을 차지하고 있다.

그에 비해 image태그 혹은 button 태그는 inline태그라, 아무리 내가 margin auto를 주어도 

해당 줄을 다 차지하고 있지 않아서, 중앙정렬이 되지 못한 것이다.

 

이럴 때 해결할 수 있는 방법은 inline이 기본인 button을 

block으로 바꾸어주는 것 => display: block으로 해주는 것이다.

 

오늘도, 또 한 수 배워 간다 ㅠㅠ

참고 :

[[CSS] display - block과 inline 그리고 inline-block](https://seungwoohong.tistory.com/23)