일반적으로 워드프레스에서 사이트 제목을 중앙 정렬하는 것은 CSS에서 text-align:center;를 사용하여 쉽게 가능합니다. 하지만 경우에 따라 이것이 생각보다 쉽지 않을 수 있습니다. 두 가지 예를 들어서 한 번 살펴보겠습니다.
먼저 기본 테마인 Twenty Twelve에서 사이트 제목(사이트 타이틀)을 중앙 정렬하는 방법을 살펴보겠습니다. 이 테마의 헤더에는 영역이 하나밖에 없기 때문에 다음과 같은 코드로 쉽게 사이트 제목을 쉽게 중앙 정렬할 수 있습니다.
h1.site-title { text-align: center; }
샘플을 살펴보면 다음과 같이 중앙에 배열되었음을 볼 수 있습니다.
다음으로 약간 까다로운 예를 하나 살펴보겠습니다. Pinboard라는 테마인데요. 이 경우 text-align: center;를 통해 중앙에 배열이 잘 되지 않습니다.
위의 그림과 같이 이 테마의 헤더에는 두 개의 요소가 있습니다. 요소가 하나만 있다면 쉽게 중앙 정렬이 가능합니다(div 내의 div를 중앙에 정렬하기 글 참조). 하지만 여기에서는 요소가 두 개이기 때문에 오른쪽에 있는 요소도 고려해야 합니다. 다음과 같이 약간의 트릭을 사용하여 사이트 제목(로고인 경우에도 마찬가지로 생각됩니다)을 중앙에 정렬할 수 있습니다.
.header_top { text-align: center!important; } h1#logo { display: inline-block!important; width: 100%; } .social-profile-icons.spi_custom { margin-top: -45px; }
그러면 다음과 같이 중앙으로 정렬되어 있는 것을 확인할 수 있습니다.
원리는 간단합니다. div 내의 div를 중앙에 정렬하기 부분을 약간 응용한 것입니다. 위의 코드를 분석해보시면 쉽게 이해가 되실 것입니다. (참고로 이 경우 모바일에서는 제대로 표시되지 않을 수 있으므로 위의 CSS 코드를 미디어 쿼리를 사용하여 PC에서만 표시되도록 하는 것이 좋을 것입니다.) 이상으로 두 가지 경우를 예를 들어 WordPress에서 사이트 제목을 중앙에 정렬하는 방법을 살펴보았습니다.
댓글 남기기