a태그를 정렬하는 방법에 대해서 알아보겠습니다.
css에서 가운데 정렬 명령을 줄 때, 주로 margin이나 text-align:center 등의 명령을 주어 정렬을 합니다.
아무 명령을 주지 않았을 때는 기본적으로 왼쪽 정렬 상태인데, 특정한 위치를 기준으로 정렬을 하려고 할 때
text-align:center;
/* 가운데 정렬 */
text-align:right;
/* 우측 정렬 (오른쪽 정렬) */
text-align:left;
/* 좌측 정렬 (왼쪽 정렬) */Code language: CSS (css)위처럼 명령을 해 주면 원하는 대로 정렬을 할 수 있습니다.
하지만, 주로 링크를 걸 때 사용하는 a태그는 블럭 요소가 아닌 in-line 요소(인라인태그) 이기 때문에 margin이나 text-align: center;등의 명령어가 먹히지 않습니다.
h2태그에 border(테두리)를 씌워서 기본적으로 h2태그가 갖는 면적을 확인해보겠습니다.
위처럼 글자가 많지 않아도 h2태그는 한 줄 전체의 면적을 자동으로 차지하는 것을 볼 수 있습니다. 그렇기 때문에 center 명령을 주게 되면 저 면적 중 가운데로 정렬이 되는 것입니다.
하지만 a태그에 h2태그와 똑같이 border를 주게 되면, a태그 내 쓰여진 글자만큼만 면적을 갖는 것을 볼 수 있습니다. 그렇기 때문에 center명령을 주어도 이동할 수 있는 공간이 없다는 것인데요.
이럴 경우 a태그를 정렬하는 가장 간단한 방법을 소개하겠습니다.
a태그를 div태그나, article 태그로 감싼 뒤, div나 article 태그에 text-align:center; 명령을 주는 것입니다.
이렇게 하면 간단하게 a태그를 원하는 대로 정렬 할 수 있습니다.
