워드프레스 이미지 가운데 정렬, 이미지 하단 여백, 캡션 가운데 정렬

  • 트위터 공유하기
  • 페이스북 공유하기
  • 네이버 밴드에 공유하기
  • 네이버 블로그 공유하기
  • 카카오톡 공유하기

워드프레스를 하다 보면 반복적으로 하는 작업들을 조금 더 편하게 할 수 없을지 고민하게 됩니다. 그 중에 하나가 바로 이미지를 넣을때 자동으로 자동 정렬 시키는 것이 아닐까 하는데, 이번 포스팅에서는 워드프레스에서 이미지 삽입 시 자동으로 가운데 정렬하는 방법과 이미지와 테이블의 캡션을 자동으로 자동 정렬하는 방법, 이미지의 하단 여백을 자동으로 넣는 방법을 알아보겠습니다.

우선 워드프레스 관리자 페이지에 접속을 해서 외모 ➡ 사용자 정의하기 ➡ 추가 CSS로 이동해 아래의 코드를 넣습니다.

/* 이미지/테이블 캡션 가운데 정렬 및 하단 여백 */

.wp-block-image {
	text-align: center;
	margin-bottom: 40px;
} figcaption {
        text-align: center;
	}

.wp-block-table {
	margin-bottom: 40px;
} figcaption {
	text-align: center;
}

코드를 하나씩 설명을 드리면 .wp-block-image는 워드프레스의 이미지 블록을 의미합니다. text-align: center;은 가운데 정렬을 하라는 코드입니다. margin-bottom: 40px;는 하단의 여백을 40px만큼 주라는 의미입니다.

여백을 더 늘리고 싶다면 40px의 값을 더 큰 값으로 주면 되고, 상단의 여백을 조정하고 싶다면 margin-top:40px;를 추가하시면 됩니다.

figcaption은 캡션으로 역시 text-align: center;로 가운데 정렬을 시킵니다. 캡션의 글자 크기가 마음에 들지 않는다면 font-size: 15px;를 추가해서 사이즈를 변경할 수 있습니다. 15px는 폰트의 크기를 의미하니 원하는 숫자로 변경하실 수 있습니다.

.wp-block-table은 워드프레스의 테이블 블록을 의미하고 같은 방법으로 하단 여백과 정렬을 하실 수 있습니다.

댓글 달기

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

Scroll to Top