HTML/CSS] 가운데 정렬이 안된다고?

 

text-align을 이용해서 모든 글자(text)를 중앙배열 시켜보자.

가운데 정렬을 하기 위해서 모든 태그의 스타일에 'text-align : center'를 적용하자.

 

오잉? 아래를 보면 모든 태그를 center로 맞추었는데, 이상하게 a태그는 중앙 배열이 되지 않는걸 볼 수 있다.

왜그럴까?

 

F12를 눌러서 개발자 모드로 들어가자. 좌측 상단의 화살표를 클릭해서 태그에 갖다대자. 그러면 태그가 적용되는 범위를 박스로 확인할 수 있다.

h1태그 

p태그 

div태그 

a태그

a 태그만 영역이 글자가 있는 구역만 해당된 다는 것을 알 수 있다.

이럴때는 div태그 같이 한 줄 전체를 영역으로 인식하는 태그로 감싸주면 된다

짜잔~ 가운데 정렬이 된 걸 확인할 수 있다 :)