엔터프라이즈 워드프레스

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

에 의해서 | 2017년 9월 20일 | 코멘트 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)’를 체크해 줍니다.

0개의 댓글

댓글 제출

노하우 작성자

크리에이티브 커먼즈 라이센스

단비스토어의 노하우는 모두 CCL(Creative Commons License)를 따릅니다. 저작자와 출처 등을 표시하면 저작물의 변경, 2차적 저작물의 작성을 포함한 자유이용을 허락합니다.