2016-01-13 131 views
6

我試圖用我現在所面臨的角度material.The問題的md-grid-tilemd-grid-tile內容對齊center.How使從開始角材料-md格列表內容

<md-content layout-padding> 

     <md-grid-list md-cols="6" 
      md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px" 
      md-gutter-gt-sm="8px" md-gutter="4px"> 
        <md-grid-tile 
        ng-repeat="room in floorDetails.roomDetails" 
        ng-style="{'background': '#f2f2f2'}" 
        md-colspan-gt-sm="3" 
        md-rowspan-gt-sm="2"> 



           <div layout="row" layout-align="center center"> 
           <b >Room1</b> 
           </div> 
           <div class='md-padding' layout="row" layout-wrap> 
             <md-card class="md-card" ng-repeat="bed in room.bedIds"> 
              <md-card-content> 

              </md-card-content> 
             </md-card> 
            </div> 
          </div> 
       </md-grid-tile>   
     </md-grid-list> 

它工作當前捕捉

Current snap

期望捕捉

desired snap

回答

14

試着下次提供一個codepen/plunkr的例子,如果人們有示例代碼可以玩,他們更傾向於幫助你。你應該閱讀angular-material layout。您主要是在md-grid-tile內丟失了一個<div layout="column" layout-fill>容器。 layout-fill使容器填充整個瓷磚。

然後,您可以使用固定的css尺寸調整卡片的尺寸或將它們彎曲。該示例水平彎曲它們可能不是所期望的。

codepen

+0

非常感謝您 –

+0

似乎不工作(還)有角2材料設計位 – CalvinDale