Divi에서 같은 줄의 요소를 정렬하는 방법

수직으로 정렬하는 기능 내용 사이트를 만들 때 Divi 디자인 도구에 편리한 추가 기능이 될 수 있습니다. 때때로 특정 조항은 다음을 요구합니다. 내용 다양한 방식(가운데, 아래쪽, 위쪽)으로 수직으로 정렬됩니다. 가장 일반적으로 필요한 것은 내용 수직.

콘텐츠에 여러 열 레이아웃을 사용할 때 편리한 대칭 간격의 맛있는 터치를 제공합니다. 또한 세로 중심 콘텐츠는 다른 브라우저 너비에서 중앙에 유지되므로 유사한 응답 성을 얻기 위해 사용자 지정 패딩 또는 여백을 적용해야하는 번거 로움이 없습니다.

이 튜토리얼에서는 콘텐츠를 세로로 정렬하기 위해 열에 몇 가지 작은 CSS 스니펫을 추가하는 방법을 보여 드리겠습니다. 에서 미리 만들어진 레이아웃 중 일부를 사용할 것입니다. Divi 이 작업을 수행하는 방법에 대한 예입니다. CSS에 대해 잘 모르더라도 걱정할 필요가 없습니다. 몇 초 만에 자신의 레이아웃에 적용하는 것은 매우 쉽습니다.

Flex 및 Divi 이해하기

css Flex (또는 Flexbox) 속성은 단순히 항목을 가로 및 / 또는 세로 스택 (테이블과 유사)에 배치하는 방법입니다. 기존 테이블과 달리 flex 속성을 사용하면 포함 된 콘텐츠의 크기에 맞게 조정되는 상자를 만들 수 있습니다.

Divi 행 매개변수로 "열 높이 균등화"를 선택할 때마다 flex 속성을 사용합니다. 이렇게 하면 열의 크기가 콘텐츠가 가장 많은 열의 크기에 맞게 조정됩니다. 그리고 "열 높이 균등화"를 사용하면 행 컨테이너에 유연성을 부여할 수 있으므로 열에 CSS를 추가하여 각 열(또는 영역)의 내용을 조정하면 쉽게 활용할 수 있습니다.

예를 들어, 행의 열에 "margin : auto"를 추가하면 해당 열의 내용 (하나 이상의 모듈인지 여부에 관계없이)이 세로 중앙에 배치됩니다.

또한 "align-items : center"를 줄에 추가하면 모든 열 (및 내용)이 세로로 가운데에 배치됩니다.

물론 웹 디자인에서 Flex 속성에 대한 다른 많은 용도와 테마에 적용 할 수있는 고급 CSS가 많이 있습니다. 하지만이 튜토리얼에서는 간단하게 유지하고 싶었습니다.

정말 필요한가요?

기술적으로는 아닙니다. 맞춤 간격 (패딩 및 여백)을 사용하여 열에서 콘텐츠 / 모듈을 수직으로 정렬 할 수 있습니다. 예를 들어, Divi의 간격 옵션을 사용하여 열에 모듈을 수직으로 중앙에 배치하기 위해 상단 및 하단 패딩과 동일한 열을 제공 할 수 있습니다. 열에 위쪽 여백 만 추가하여 아래쪽 콘텐츠를 맞출 수도 있습니다. 그러나 더 많은 콘텐츠로 페이지를 업데이트 할 때 간격을 조정해야 할 수 있습니다. 또한 다양한 브라우저 너비에서 이러한 정렬을 유지하기 어려울 수 있습니다.

따라서 사용자 지정 간격에 대해 생각할 필요없이 콘텐츠를 세로로 정렬하는 솔루션을 찾고 있다면 이것이 유용 할 것이라고 생각합니다.

시작하자!

미리 정의 된 레이아웃을 페이지에로드

우선 Interior Design Company Portfolio 범위의 레이아웃을 사용하겠습니다. 페이지에서이 레이아웃을 얻으려면 새 페이지를 만드세요. 그런 다음 페이지 제목을 지정하십시오. "Use Divi Builder"를 클릭 한 다음 "Use Visual Builder"를 클릭합니다. 그런 다음 "기본 레이아웃 선택"옵션을 선택합니다. 그런 다음 라이브러리에서로드 팝업 창에서 Interior Design Company 레이아웃 키트를 선택합니다. 마지막으로 레이아웃 목록에서 포트폴리오 페이지를 선택하고 "이 레이아웃 사용"을 클릭합니다.

레이아웃이 페이지에로드되면 준비가 된 것입니다.

방법 1 : Flex 및 Auto Margin을 사용하여 콘텐츠를 세로로 맞추는 방법

페이지의 두 번째 줄 (페이지 제목이있는 줄 바로 아래에있는 줄)에 대한 줄 설정을 엽니 다. Design Settings에서 크기 조정 옵션 그룹을 열고 "Equalize Column Heights"가 이미 활성화되어 있는지 확인합니다. 이것은 이제 라인에 flex 속성 ( "display : flex;")이 추가되었음을 의미합니다.

이제 동일한 행에 대한 고급 탭의 설정으로 이동하여 2 열의 기본 요소 입력 상자 아래에 다음 CSS 스 니펫을 추가하십시오.

이제 두 번째 열의 내용이 세로 가운데로 이동되었습니다.

더 낮은 내용을 정렬

모든 모듈이 열의 맨 아래에 쌓 이도록 콘텐츠를 맨 아래에 맞추려면 다음과 같이 여백 값을 조정할 수 있습니다.

행의 모든 열에 대한 콘텐츠의 세로 정렬

"margin : auto"를 각 열에 개별적으로 추가하는 대신 행 설정의 기본 요소에 다음 스 니펫을 추가하여 행에있는 모든 열의 콘텐츠를 세로로 가운데에 배치 할 수도 있습니다.

또는 열의 모든 내용을 맨 아래에 정렬하려면이 발췌를 추가 할 수 있습니다.

CSS 스 니펫으로 기본 요소를 마우스 오른쪽 버튼으로 클릭하고 "기본 요소 확장"을 클릭하여 Divi의 스타일 확장 기능을 활용할 수 있다는 사실을 잊지 마십시오.

그런 다음이 주요 CSS 요소를 페이지의 모든 행 (또는 섹션)으로 확장하여 페이지의 각 열 내용을 모두 세로로 가운데에 맞 춥니 다.

이제 모든 것이 수직으로 집중됩니다.

그러나 흰색 열의 배경색이 더 이상 행의 전체 높이를 덮지 않는다는 것을 알 수 있습니다. 이것은 열에 "margin : auto"를 추가했기 때문입니다. 이 문제를 해결하려면 선의 배경색을 흰색으로 변경하고 선에서 채우기를 제거 할 수 있습니다. 대신 여백을 변경하지 않고 열 내용을 가운데에 맞추는 방법을 보여 드리겠습니다.

방법 2 : 열 플렉스 방향을 사용하여 콘텐츠를 세로로 정렬

첫 번째 방법에서는 행에 추가 된 flex 속성을 활용했습니다. 이로 인해 각 열은 여백을 조정하여 수직으로 정렬 할 수있는 "유연한 상자"가되었습니다.

그러나 열 (및 열 배경) 크기를 동일하게 유지하는 "열 높이 동일화"효과를 잃지 않고 열 내용을 정렬하는 flex-direction 방법도 있습니다. 이를 위해 열에 CSS 몇 줄을 추가하여 열의 모든 모듈이 세로로 쌓인 다음 중앙에 배치되도록합니다.

이전 예제의 라인으로 돌아 갑시다. 행 설정을 열고 사용자 정의 CSS를 마우스 오른쪽 단추로 클릭하고 "사용자 정의 CSS 스타일 재설정"을 클릭하여있을 수있는 사용자 정의 CSS를 제거하십시오.

그런 다음 2 열 아래에 주요 요소 인 다음 CSS를 추가하십시오.

디스플레이 : 플렉스; 플렉스 방향 : 열; 정당화 내용 : 센터;

또는 하단에 컨텐츠를 정렬하려면 "컨텐츠 정의 : 중심"을 "컨텐츠 정의 : flex-end"로 바꾸십시오.

이 설정의 장점은 콘텐츠가 세로 중앙에 있고 행 너비에 도달하면 콘텐츠가 중앙에 유지된다는 것입니다.

서로 다른 양의 세로로 정렬 된 텍스트로 블러 (요약) 만들기

열 콘텐츠를 세로 가운데에 맞추는 것도 광고 문구에 유용할 수 있습니다. 아시다시피 모든 광고 문구에 d에 사용된 정확한 양의 텍스트가 포함되지는 않습니다.쓰기 기능 또는 서비스. 이러한 광고 문구를 세로로 중앙에 배치하면 레이아웃을 위한 아름다운 디자인을 만들 수 있습니다.

이 예에서는 디지털 결제 홈페이지 레이아웃에 광고 문구를 수직으로 정렬하겠습니다.

사이트가 어떻게 생겼는지보다 사실적으로 표현하기 위해 먼저 블 러브에 다른 양의 본문 텍스트를 추가 할 것입니다.

이제 줄 설정과 "열 높이 조화"로 이동해야합니다.

이제 콘텐츠를 정렬하고 디자인을 수정하기 위해 CSS 스 니펫을 추가 할 수 있습니다.

행 설정의 고급 탭에서 기본 요소 아래에 다음을 추가하여 열의 내용을 세로로 가운데에 배치 할 수 있습니다.

또는 다음과 같이 변경하여 줄을 정렬하십시오.

사용자 정의 CSS 스타일을 재설정하고 다음 사용자 정의 여백을 추가하여 첫 번째 열 하단과 세 번째 정렬 된 열 상단을 정렬 할 수 있습니다.

1 열 CSS 기본 요소 :

3 열 CSS 기본 요소 :

단일 열 레이아웃은 어떻습니까?

기술적으로 열 콘텐츠를 세로로 가운데에 맞추기 위해 CSS 스 니펫이나 플렉스가 필요하지 않습니다. 콘텐츠 (또는 모듈)의 위와 아래에 동일한 간격이 있는지 확인하기 만하면됩니다. 대부분의 경우 사용자는 인접한 콘텐츠가 완벽하게 정렬되기를 원하기 때문에 여러 열이있는 레이아웃을 중심으로하는 세로 콘텐츠가 필요합니다.

이것으로 Divi의 동일한 라인에 요소를 정렬하는 방법을 보여주는이 튜토리얼을 완료했습니다.