Materializecss 사각형의 격자 3x3

Question

3x3 크기의 사각형의 전체 화면 격자로 붙어 있습니다.

이

은 레이아웃이다 :

여기

내가 가지고있는 지금 : https://jsfiddle.net/hbrnszns/ (Ctrl 키를 클릭) 여기

입니다 CSS :

.rectangle { 
    float: left; 
    width: 100%; 
    padding-bottom: 50%; 
    margin: 1.66%; 
    align-items: center; 
    background-color: #00a388; 
} 

방법 제대로 직사각형의 내부 이미지를 수직으로 정렬하고, 전체적으로 올바르게 수행하는 방법

Answer 1

기존 레이아웃을 사용하여 절대 위치 지정을 사용하여 이미지를 중앙에 배치 할 수 있습니다. 그것은 높이 평가 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

.light-grass { 
 
    background-color: #79bd8f; 
 
} 
 

 
.rectangle { 
 
    width: 100%; 
 
    padding-bottom: 50%; 
 
    margin: 1.66%; 
 
    align-items: center; 
 
    background-color: #00a388; 
 
    position: relative; 
 
} 
 

 
.rectangle > span { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="header"> 
 
\t <nav class="light-grass z-depth-0" role="navigation"> 
 
\t </nav> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="col s4"> 
 
    <div class="rectangle valign-wrapper"> 
 
     <span><img class="work-icon" src="http://placehold.it/100x40"></span> 
 
    </div> 
 
    </div> 
 
</div>