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

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



목차



워드프레스 CSS 링크버튼 정렬 문제

워드프레스 CSS 링크버튼


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



1) 링크버튼 HTML 코드

워드프레스 링크버튼 html


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

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



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

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

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

워드프레스 링크버튼 HTML 가운데 정렬 코드 추가


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

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

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


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

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


<함께 읽으면 좋은 글>

워드프레스 링크버튼 만들기 (CSS 코드추가) (8mtree.com)



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

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다