a태그가 가운데 정렬이 안되는 이유
a태그는 inline 속성을 가지고 있어서 자신의 컨텐츠만큼의 영역만을 차지한다.
위의 보기 처럼 a태그에 border를 넣었을 때 자신의 컨텐츠 영역만 차지하는 것을 확인할 수 있다.
그래서 a태그를 center로 정렬 시켰을 때 가운데로 이동 할 공간이 없기 때문에 text-align: center;를 주어도 작동하지 않는 것이다.
반면, h1태그는 block 속성을 가지고 있어 한줄의 영역을 모두 차지한다.
위의 보기 처럼 h1태그에 border 속성을 주었을 때 h1태그가 있는 한줄의 공간을 모두 차지하는 것을 볼 수 있다.
h1을 center로 정렬 시켰을 때 가운데로 움직일 공간이 있기 때문에 center 기능이 제대로 작동한다.
a태그 가운데 정렬하는 방법
a태그를 div로 감싸기
a태그를 block 요소인 div로 감싼 후 div에 text-align: center;를 주면 a태그가 가운데로 정렬된다.
a태그를 display: block;로 만들어주기
a태그 자체에 display: block; 속성을 주어 block 요소로 만들어버리고 a태그에 text-align: center;를 주면 가운데 정렬이 가능하다.
