수세 갤러리에서 항목의 세로 맞춤()

Question

수채화 갤러리()의 항목 vertical-align: middle은 어떻게됩니까? 내가 첨부 한 이미지는 현재 아이템의 수직 정렬을 보여줍니다. 내 강조에서 볼 수 있듯이 현재 모두 vertical-align: top입니다.

은 사전에 감사합니다. CSS 수직 중심 수레에 어떤 방법을 가지고 있지 않기 때문에 가능, gallery()를 사용하지 않는 것

올리버

Answer 1

. 중심 맞춤 갤러리를 얻으려면 플렉스 박스, 그리드, 디스플레이 테이블 또는 인라인 블록 레이아웃을 사용해야합니다. 도움이된다면 여전히 Susy를 사용하여 수학을 할 수 있습니다. 여기에 flexbox가 있습니다 :

.container { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
} 

.item { 
    background: lightgray; 
    flex-basis: span(1 of 6); 
    margin-right: gutter(of 6); 

    &:nth-child(6n) { 
    margin-right: 0; 
    } 
}