Sass, Susy 및 Compass와 수직 정렬

모든 도움을 많이 받으실 수 있습니다. 내 웹 사이트를 재 설계하기 위해 Sass, Compass 및 Susy를 사용하고 있습니다. 브라우저에서 세로 중심을 설정하는 방법을 알아야합니다. 저는 5 개의 기둥이있는 행을 가지며 그것을 수직으로 중심에 두어야합니다.Sass, Susy 및 Compass와 수직 정렬

다음은 HTML입니다 :

<div class="layout"> 
    <section></section> 
    <section></section> 
    <section></section> 
    <section></section> 
    <section></section> 
</div>

섹션 컬럼의 행을 만들 수 있습니다. .layout 클래스를 세로 가운데에 배치해야합니다.

출처

2014-07-22 Meylo Rodriguez

변환 (더 나은 브라우저 지원) 또는 flexbox를 사용하여 요소를 세로로 가운데에 맞출 수 있습니다. 몇 가지 예를 보려면 http://codepen.io/KatieK2/pen/AbxGr?editors=110을 참조하십시오. 귀하의 시나리오에 대한보다 구체적인 예를 게시하십시오. – KatieK

이와 같은 문제가있는 경우 CSS에서 수직 중심 맞춤을 위해 먼저 해결하십시오. 내가 아는 두 가지 최상의 방법은 최신 브라우저에서만 작동합니다. 가장 좋은 옵션은 flexbox이고, 그 다음에 인 position과 transform을 사용합니다. "css vertical center"를 검색하면 다른 솔루션이 있습니다.

둘 다 브라우저에서 작동하도록 접두사가 필요합니다. Compass가 도움이 될 수 있습니다. 나침반에는 flexbox와 변형 모두를 돕는 믹스 인이 있습니다.

출처

2014-07-22 06:42:14

저는 온라인에서 여러 가지 위치/tranform CSS 속임수를 보았지만 그 요소에는 높이가 있어야합니다. 내 .layout 요소에는 높이가 설정되어 있지 않으므로 잘못 변형됩니다. –

내가 연결된 트릭은 높이 설정이 필요하지 않습니다 (그러나 사이트가 다운 되었습니까?). 'position : absolute;를 사용하십시오. 상위 : 50 %; transform : translateY (-50 %);'- 상단 위치는 컨테이너에 상대적이며, 변환은 센터링하는 요소에 상대적이므로 완벽한 중앙을 제공하기 위해 결합됩니다. –

답변

관련 문제