워드프레스 대표 이미지 중앙 정렬 완벽 가이드: Astra & GeneratePress (CSS 해결)

밤새 공들여 쓴 글, 하지만 정작 대표 이미지(Featured Image)가 왼쪽 구석에 덩그러니 붙어 있어 답답했던 적 있으신가요? 글의 첫인상을 결정짓는 이미지가 한쪽으로 쏠려 있으면, 아무리 좋은 내용이라도 전체적인 균형이 무너져 보일 수 있습니다. 특히 Astra나 GeneratePress 같은 인기 테마의 무료 버전을 사용하다 보면 이런 ‘왼쪽 쏠림’ 현상을 꽤 자주 마주하게 됩니다.

이걸 고치겠다고 무거운 레이아웃 플러그인을 깔거나, 복잡한 테마 설정을 헤매며 시간을 낭비할 필요는 없습니다. 웹 브라우저가 화면을 그리는 아주 간단한 원리만 알면, 단 몇 줄의 CSS 코드로 이 문제를 깔끔하게 해결할 수 있습니다. 오늘 이 글에서는 여러분의 블로그 디자인을 한 단계 업그레이드해 줄, 가장 안전하고 확실한 이미지 중앙 정렬 방법을 소개해 드리겠습니다.

1. 왜 내 이미지는 왼쪽으로 쏠려 있을까? (문제 진단)

테마의 기본 설정과 CSS의 이해

테마를 설치하고 글을 발행했을 때 이미지가 왼쪽으로 치우치는 건 오류가 아닙니다. 사실 이건 웹의 역사와 관련이 있습니다. 초창기 웹 디자인은 신문 기사처럼 이미지를 왼쪽에 두고 글자가 그 옆을 자연스럽게 흐르도록(float: left) 만드는 게 표준이었습니다. 그래서 많은 테마가 이미지의 기본 속성을 글자처럼 취급하는 inline-block으로 설정해 두곤 합니다.

쉽게 말해, 컴퓨터는 지금 여러분의 이미지를 ‘그림’이 아니라 커다란 ‘글자’로 인식하고 있는 것입니다. 문장이 왼쪽에서 시작하니, 이 커다란 글자(이미지)도 당연히 왼쪽에 붙게 됩니다.

우리가 원하는 ‘중앙 정렬’을 하려면 컴퓨터에게 이렇게 다시 알려줘야 합니다.

“이건 글자가 아니라, 한 줄을 혼자 다 차지하는 ‘박스(Block)’야!”

이 원리만 이해하면 Astra 테마의 이미지 정렬 문제뿐만 아니라, 워드프레스 속도 최적화 가이드에서 다루는 레이아웃 최적화 원리와 마찬가지로 다른 어떤 테마를 만나더라도 레이아웃을 제어할 수 있는 통찰력을 얻게 됩니다.

2. 해결책: 만능 중앙 정렬 CSS 코드

복사해서 바로 쓰는 CSS 스니펫

가장 확실하고 어디에나 잘 먹히는 방법은 CSS(Cascading Style Sheets)를 사용해 이미지의 속성을 강제로 바꿔주는 것입니다. 아래 코드는 워드프레스가 사용하는 표준 이름표(클래스)를 콕 집어 정렬을 명령합니다.

        초보자를 위한 코드 설명:

        아래 코드는 이미지를 ‘블록’으로 만들고, 좌우 여백을 자동으로 주어 가운데로 오게 만듭니다.

/* 특성 이미지(Featured Image) 중앙 정렬 CSS */

/* 1. 워드프레스 표준 이미지 클래스들을 선택합니다. */
.post-thumbnail, 
.entry-content img.wp-post-image,
.featured-image {
    /* 2. 혹시 이미지를 감싸는 요소가 있다면 내부 정렬을 중앙으로 합니다. */
    text-align: center;
    
    /* 3. 이미지를 '글자'가 아닌 '박스' 형태로 바꿉니다. (한 줄 차지) */
    display: block;
    
    /* 4. 위아래 여백은 0, 좌우 여백은 '자동(auto)'으로 설정하여 중앙에 배치합니다. */
    margin: 0 auto;
}

이 코드가 마법을 부리는 원리는 다음과 같습니다.

.post-thumbnail, .wp-post-image: 워드프레스가 썸네일과 본문 이미지에 자동으로 붙여주는 이름표를 부릅니다.
display: block: 여기가 핵심입니다. 이미지를 ‘글자’에서 ‘블록(박스)’으로 바꿔줍니다. 이제 이미지는 자기 크기와 상관없이 가로 한 줄 전체를 자신의 영역으로 갖게 됩니다.
margin: 0 auto: 블록 정렬의 공식과도 같습니다. 위아래 여백은 0으로 하고, 좌우 여백을 auto(자동)로 설정합니다. 그러면 브라우저가 남은 좌우 공간을 똑같이 나눠 가지면서 이미지가 정중앙에 위치하게 됩니다.

코드를 적용하는 안전한 위치 (Step-by-Step)

코드를 구했으니 이제 올바른 위치에 넣어야 합니다. 테마 파일(style.css)을 직접 수정하는 것은 추천하지 않습니다. 테마 업데이트 시 수정 내용이 사라질 수 있기 때문입니다. 워드프레스가 제공하는 안전한 ‘추가 CSS’ 기능을 이용해 보세요.

워드프레스 관리자 알림판에 로그인합니다.
왼쪽 메뉴에서 [디자인(외모)] > [사용자 정의하기]를 클릭하세요.
메뉴 가장 아래쪽에 있는 [추가 CSS] 탭을 엽니다.
입력창에 위에서 복사한 코드를 그대로 붙여넣으세요.
오른쪽 미리보기 화면에서 이미지가 중앙으로 이동했는지 확인해 봅니다.
잘 되었다면 상단의 [발행] 버튼을 눌러 저장합니다.

3. 테마별 심화 가이드 (Astra & GeneratePress)

Astra 테마 사용자라면 확인해야 할 것

Astra는 가볍고 빠르지만, CSS 우선순위가 높은 편입니다. 만약 위의 만능 코드를 넣었는데도 작동하지 않는다면, Astra가 이미지를 감싸고 있는 특정 컨테이너 때문일 확률이 높습니다.

이때는 코드 맨 윗부분 선택자 목록에 Astra 전용 클래스인 .ast-single-post-featured-section img를 추가해 주시면 됩니다. 또한 Astra는 무료 버전과 유료(Pro) 버전의 기능 차이가 있습니다.

비교 항목	Astra 무료 버전	Astra Pro 버전
정렬 옵션	기본 제공 안 함 (CSS 필수)	커스터마이저 내 클릭 설정 가능
여백 제어	고정된 기본값	Padding 및 Margin 미세 조정 가능
해결 방법	위의 CSS 코드 적용	‘블로그 프로’ 모듈 활성화

GeneratePress 사용자라면 확인해야 할 것

구조가 유연한 GeneratePress(GP) 최적화 가이드에서도 언급했듯이, GP 테마는 코드를 넣기 전에 테마 자체 옵션을 먼저 살펴보는 것이 좋습니다.

[사용자 정의하기] > [레이아웃] > [블로그] 메뉴로 이동합니다.
‘Featured Images(특성 이미지)’ 섹션에서 정렬(Alignment) 옵션이 ‘Center’인지 확인합니다.

만약 옵션이 보이지 않거나 작동하지 않는다면, 앞서 소개한 CSS 코드를 추가 CSS 란에 입력해 주세요. GP 테마는 표준을 잘 따르므로 코드가 매우 잘 작동합니다.

4. 코드가 작동하지 않을 때 체크리스트

“시키는 대로 다 했는데 왜 안 변하죠?” 당황하지 마세요. 다음 세 가지 중 하나일 가능성이 큽니다.

💡 체크리스트

범인은 ‘캐시(Cache)’: 코드는 잘 들어갔는데, 브라우저나 서버가 옛날 디자인을 기억하고 있는 경우입니다. 브라우저 강력 새로고침(Ctrl + F5)이나 캐시 플러그인의 ‘Clear Cache’를 실행하세요.
우선순위 문제: 다른 플러그인이 설정을 덮어쓰고 있을 수 있습니다. 이럴 땐 margin: 0 auto !important; 처럼 !important를 붙여 강제 적용할 수 있지만, 최후의 수단으로만 사용하세요.
이미지가 너무 큼: 이미지가 이미 화면 가로폭을 꽉 채우고 있다면(width: 100%), 중앙 정렬을 해도 움직일 공간이 없어 티가 안 납니다. 이럴 땐 max-width: 80%; 같은 코드를 추가해 크기를 줄여보세요.

5. 마무리하며: 디자인의 디테일이 전문성을 만듭니다

대표 이미지를 가운데로 옮기는 건 단순한 위치 변경 그 이상입니다. 텍스트와 이미지 사이의 묘한 긴장감을 없애고, 독자가 편안하게 글을 읽을 수 있도록 안정감을 주는 중요한 작업입니다.

별도의 비용을 들이거나 무거운 플러그인을 깔 필요도 없습니다. 오늘 알려드린 몇 줄의 CSS 코드만 있으면 블로그의 완성도가 확 달라집니다. 지금 바로 관리자 페이지를 열어 적용해 보세요. 그리고 PC 화면뿐만 아니라 모바일에서도 이미지가 시원하게 자리를 잡았는지 확인해 보시기 바랍니다.

목차