워드프레스 CSS 링크버튼 가운데 정렬 만들기 (중앙정렬)

워드프레스 CSS 링크버튼을 저번에 만들고 나서, 처음에는 몰랐는데, 링크버튼 가운데 정렬이 되지 않았다는 것을 깨달었습니다. 그래서 티스토리 블로그처럼 링크버튼 클릭했는데, 중앙 정렬 아이콘이 안 보이는 것입니다. 그것을 저는 아주 간단한 방법으로 해결했습니다.

워드프레스 링크버튼 가운데 정렬 문제

위의 사진은 저번에 Button Generator 웹사이트 통하여 CSS에 코드를 넣어 만든 링크 버튼입니다. 만들고 난 이후에는 몰랐는데, 왼쪽 정렬이 되어 있어 이를 가운데 정렬하고자 하였습니다. 그런데 이에 대한 문제점을 알아냈습니다. 아래는 위 링크버튼의 HTML 코드입니다.

1) 링크버튼 가운데 정렬 HTML 코드

글 편집을 통하여 들어가서 링크버튼 HTML을 클릭하면 정렬 아이콘이 보일 줄 알았습니다. 그런데 안 보이는 것입니다. 이것저것 다 건들어 보았는데 정렬 아이콘이 어디에 있는지를 찾지 못하였습니다.

그때부터 검색을 통하여 링크버튼을 가운데 정렬하는 방법에 대하여 여러 가지 알아보았습니다. 하지만 결과는 다 실패했습니다. 추가 CSS에 가운데 정렬 관련 코드도 이것저것 다 집어 넣어 봤는데, 아무 변화가 없었습니다.

2) 갑자기 생각난 애드센스 광고 코드

저는 애드센스 광고 코드를 메모장에 저장해 놓고 복사하여 티스토리 블로그 HTML에 수동으로 넣는 방법으로 운영해 왔습니다. 그 당시에 저의 애드센스 광고 코드에 <div>와 <center> 코드를 위 아래로 붙여 넣으니 애드센스 광고가 가운데 정렬이 되는 것이 기억이 났습니다.

그래서 워드프레스 CSS로 만든 링크버튼에 그 코드를 아래와 같이 넣어보았습니다.

기존에 만들어 놓은 링크버튼 HTML 코드 앞에 <div><center> 그리고 제일 마지막에 </center></div> 붙여 넣어보았습니다.

참고로 div는 특정 영역을 지정하고 싶을 때 사용하고, center는 가운데로 위치시킬 때 사용합니다. 이렇게 변경하고 나서 업데이트를 해 보았습니다. 과연 결과는 어떻게 나왔을까요?

코드 추가 후에는 CSS 추가하여 만든 링크버튼이 가운데 정렬이 되었습니다. 생각보다 방법은 간단했는데, 헤맸던 것 같습니다.

링크버튼이 HTML로 구성되어 있으면 이것에 변화를 주는 것도 HTML로 주면 되는데 CSS를 통한 방법을 찾다 보니 시간이 오래 걸렸던 것 같습니다. 어쨌든 링크버튼이 가운데 있으니 훨씬 보기 좋은 것 같습니다.

오늘은 워드프레스 CSS 링크버튼 가운데 정렬에 대하여 알아보는 시간을 가져보았습니다. 저처럼 워드프레스 시작한 지 얼마 안된 분들은 아직 워드프레스 글 포스팅하는 것이 익숙지 않으실 텐데 저랑 함께 하나씩 배워 나가셨음 좋겠습니다.

워드프레스 포스팅하다가 새롭게 알게 되는 것들은 바로 공유하도록 하겠습니다. 글 읽어 주셔서 감사합니다.