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

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;
}
Code language: PHP (php)
 

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

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

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

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