구글 블로그(blogger) 헤더 이미지 중앙, 또는 우측으로 정렬시키기

블로그 헤더 이미지를 중앙, 또는 우측으로 정렬시켜주는 코드들입니다.
코드 적용 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

헤더를 어떻게 설정하느냐에 따라서 적용해야될 코드들이 다릅니다.


1. 헤더 이미지 설정이 '제목 및 설명 뒤'인 경우

1.1. 이미지를 중앙으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner {background-position: center !important; width: 100% !important;}

1.2. 만약, 이미지를 우측으로 정렬시키고 싶다면, 다음의 코드를 적용합니다.

#header-inner {background-position: right !important; width: 100% !important;}

2. 이미지를 '제목과 설명 대신' 사용하는 경우

2.1. 이미지를 중앙으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

2.2. 이미지를 우측으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner img {margin: 0 auto 0 300px;}

여기서 숫자 300은 이미지 위치의 좌우 위치를 설정하기 위해서 높게, 또는 낮게 조절할 수 있습니다.

3. 그리고 아래의 코드들은 '블로그 제목'과 '블로그 설명' 텍스트의 위치를 정렬시켜주는 코드들입니다. 이 코드들은 이미지 없이 텍스트로만 이루어진 헤더의 경우, 또는 '이미지 다음에 설명 표시'로 설정한 경우에 해당합니다.

3.1. 이미지가 없는 경우, 또는 '이미지 다음에 설명 표시'의 경우 헤더 중앙 정렬 코드는

#header-inner {text-align: center ;}

3.2. 우측 정렬 코드는

#header-inner {text-align: right ;}

입니다.