반응형

GeneratePress 테마 경우 유료 버전을 사용하면,

특성 이미지의 정렬을 손 쉽게 할 수 있는 것으로 알고 있습니다.

 

그런데, 대부분 유료보다는 무료 사용자들이 많죠.

 

저는 개인적으로 특성 이미지를 본문에 내는걸 별로 안좋아해서

그냥 감추고 사용중입니다.

 

썸네일 이미지 역시 마찬가지로 디자인 구조상 기본 정렬을 하고 있긴 한데,

의외로 특성 이미지 및 썸네일 이미지를 중앙정렬 하고 싶어 하시는 분이

있으셔서 한번 내용을 정리 해봅니다.

 

추가 CCS 코드 입력

추가 CCS 코드 입력하기

워드프레스 관리자 > 외모 > 사용자 정의하기 > 추가 CSS

위 경로로 이동하시면 추가적으로 CSS를 입력할 수 있는 칸이 나옵니다.

 

해당 칸에 아래 코드를 입력 하신 뒤 공개를 누르시면,

해당 CSS 코드가 적용되는 것을 보실 수 있습니다.

 

/* 썸네일 이미지 중앙 정렬 */
.post-image {
text-align: center;
}

/* 본문 특성이미지 중앙 정렬 */
.featured-image.page-header-image-single.grid-container.grid-parent {
text-align: center;
}

 

적용 된 화면

썸네일 이미지 중앙 정렬 된 모습

 

본문 내용 상단 특성 이미지 중앙 정렬된 모습

위 이미지를 보시면 기본 좌측 정렬 되어 있던 이미지가

썸네일 및 본문 내용 상단의 이미지가 중앙정렬된 것을 보실 수 있습니다. 

 

위 코드를 보시면 center 대신 left나 right나 이런 정렬 방식을 입력하여

다르게 표현도 가능하니 참고 바랍니다.

반응형

+ Recent posts