워드프레스 사이트 제목 중앙 정렬하기

일반적으로 워드프레스에서 사이트 제목을 중앙 정렬하는 것은 CSS에서 text-align:center;를 사용하여 쉽게 가능합니다. 하지만 경우에 따라 이것이 생각보다 쉽지 않을 수 있습니다. 두 가지 예를 들어서 한 번 살펴보겠습니다.

먼저 기본 테마인 Twenty Twelve에서 사이트 제목(사이트 타이틀)을 중앙 정렬하는 방법을 살펴보겠습니다. 이 테마의 헤더에는 영역이 하나밖에 없기 때문에 다음과 같은 코드로 쉽게 사이트 제목을 쉽게 중앙 정렬할 수 있습니다.

h1.site-title {
text-align: center;
}

샘플을 살펴보면 다음과 같이 중앙에 배열되었음을 볼 수 있습니다.
Center align site title in twenty twelve in wordpress

다음으로 약간 까다로운 예를 하나 살펴보겠습니다. Pinboard라는 테마인데요. 이 경우 text-align: center;를 통해 중앙에 배열이 잘 되지 않습니다.
pinboard align center site title in wordpress 1
위의 그림과 같이 이 테마의 헤더에는 두 개의 요소가 있습니다. 요소가 하나만 있다면 쉽게 중앙 정렬이 가능합니다(div 내의 div를 중앙에 정렬하기 글 참조). 하지만 여기에서는 요소가 두 개이기 때문에 오른쪽에 있는 요소도 고려해야 합니다. 다음과 같이 약간의 트릭을 사용하여 사이트 제목(로고인 경우에도 마찬가지로 생각됩니다)을 중앙에 정렬할 수 있습니다.

.header_top {
text-align: center!important;
}


h1#logo {
  display: inline-block!important;
  width: 100%;
}

.social-profile-icons.spi_custom {
 margin-top: -45px; 
}

그러면 다음과 같이 중앙으로 정렬되어 있는 것을 확인할 수 있습니다. pinboard align center site title in wordpress

원리는 간단합니다. div 내의 div를 중앙에 정렬하기 부분을 약간 응용한 것입니다. 위의 코드를 분석해보시면 쉽게 이해가 되실 것입니다. (참고로 이 경우 모바일에서는 제대로 표시되지 않을 수 있으므로 위의 CSS 코드를 미디어 쿼리를 사용하여 PC에서만 표시되도록 하는 것이 좋을 것입니다.) 이상으로 두 가지 경우를 예를 들어 WordPress에서 사이트 제목을 중앙에 정렬하는 방법을 살펴보았습니다.

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

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