垂直和水平如何居中角材料卡（md卡）？

我有一個問題，我確定會有一個簡單的解決方案，我沒有找到。我正在建立一個簡單的登錄頁面，在那裏我有一個角度材料卡（md-card），僅此而已。在它裏面，我在這種情況下是正常的字段。垂直和水平如何居中角材料卡（md卡）？

但是，當我試圖垂直和水平居中這張卡片時，問題就出現了，這似乎是不可能的。我已經看到doc關於這一點，這將是如此簡單，使用 layout="row" layout-align="center center"但很明顯不適合我。我在codepen和plunker中搜索了幾個例子，但是沒有人用md-card這樣做。

有人有一個簡單的例子，如何在視圖中只有一張md卡？

來源

2016-08-23 Juan Antonio

最後，我發現了一個簡單的方法來做到這一點：

<div layout-fill layout="column" layout-align="center none"> 
    <div layout="row" layout-align="center none"> 

     <md-card> 

      <md-card-title> 
       <md-card-title-text> 
        <span class="md-headline">Card title</span> 
       </md-card-title-text> 
      </md-card-title> 

      <md-card-content> 
       Card content 
      </md-card-content> 

     </md-card> 
    </div> 
</div>

來源

2016-08-23 19:53:46

你需要導入什麼才能訪問'layout-fill'？ –

https://material.angularjs.org/latest/layout/introduction – gtzinos

你可以通過設置元素的尺寸，然後將嘗試：

margin-left: auto; 
margin-right: auto;

應該水平居中這一點。

來源

2016-08-23 18:11:30

謝謝，但這個並不爲我工作。我不明白爲什麼這個代碼： '

Sample

' 不工作，我沒有看到垂直「示例」中心。 –

這爲我修好了。 – Kirby

在這裏你去 - CodePen

列居中
- 行的中心，柔性= 「50」
  - 卡，柔性= 「50」

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:green" layout-align="center"> 
    <div flex="50" layout="row" layout-align="center"> 
     <md-card flex="50"></md-card> 
    </div> 
</div>

來源

2016-08-23 19:43:15

我只是找到了一個類似的方法來做到這一點，但沒有'flex =「50」'。謝謝！ –

@JuanAntonio很高興能有所幫助。我只是增加了'flex = 50'來獲取更多信息。 –

垂直和水平如何居中角材料卡（md卡）？

回答

相關問題