현재 서비스 준비 중인 페이지로, 실제로 다른 내용이 있을 수 있습니다. 

DIVI 빌더에서 컬럼을 세로 기준으로 가운데 정렬하기

작성자 | 2021. 01. 10 | 댓글 0개

2컬럼, 3컬럼 등 여러개의 컬럼 레이아웃 제작 시 각각의 컬럼이 세로 기준으로 가운데 정렬 (Vertical Center Align)되기를 원하는 경우가 있습니다.

DIVI 빌더에서 행(ROW) 내의 컬럼 레이아웃은 위와 같이 Vertical Top을 기준으로 정렬됩니다. 이것을 아래 화면처럼

Vertical Center를 기준으로 정렬하고자 할 때를 위한 팁입니다.

아직 DIVI 빌더에서는 이러한 경우에 대한 옵션 기능이 없기 때문에 아래와 같은 간단한 CSS 트릭을 통해 해결해야 합니다.

 

1. CSS에 세로 기준 가운데 정렬 클래스를 추가합니다.

아래 CSS 코드를 복사하여 테마 옵션의 Custom CSS Field (사용자 정의 CSS 필드) 혹은 차일드테마의 CSS 파일에 추가합니다.

.vertical-center {
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

 

2. 컬럼 레이아웃이 들어있는 행(ROW)에 CSS 클래스를 추가합니다.

행(ROW)의 Custom CSS(사용자 맞춤 CSS) 탭을 선택하여 CSS Class 입력란에 위 코드에서 정의한 CSS 클래스를 추가해 줍니다.

 

3. 컬럼 높이를 동일하게 설정

행(ROW)의 Advanced Design Setting (고급 디자인설정) 탭에서 ‘열의 높이를 균등화 (Equalize column heights)’ 옵션에 ‘예(Yes)’를 체크해 줍니다.

단비스토어

워드프레스의 개발원칙을 지키며, 워드프레스를 위한 국내 최대의 리소스를 제공합니다.

단비 노하우는...

  • 상용 사이트 제작과 운영을 지식 제공을 목적으로 단편적이고 파편적인 정보를 지양합니다.
  • 최상의 리소스를 중심으로 작성되며, 리소스의 가격은  거의 고려하지 않습니다. 따라서, 상용 사이트에 적합하지 않은 테마나 플러인은 다뤄지지 않습니다. 
  • 모든 노하우는 단비에서 직접 검증한 내용입니다.
  • IT 기술이 빠르게 발전하 듯이, 언급된 리소스에도 변화가 있을 수 있습니다. 업데이트 날짜를 기준으로 읽어봐 주시기 바랍니다.