layout-align = "center" not angles角度

Question

レイアウト - アライメント属性を使用して、入力/編集テキストをカードの中央に揃えようとしています。しかし、私の無知と幼児のために（私は今学ぶようになりました）、このカードビューの中でテキストの編集が中央に揃わない理由を理解することができません。ここ

<div flex="50" layout="row" layout-align="center"> 
    <md-card flex="50"> 
     <md-input-container layout-align="center center" class="md-block" flex="50"> 
      <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" /> 
     </md-input-container> 
    </md-card> 
</div> 

デモ：https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0

Answer 1

は、材料のガイドラインによると、あなたが行要素に入力-コンテナを配置する必要があり、

<md-card flex="50"> 
    <div layout="row" layout-align="center center"> 
     <md-input-container flex="50"> 
      <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" /> 
     </md-input-container> 
    </div> 
</md-card> 

DEMO

Answer 2

中心にするにはmd-input-containerdivで囲み、layout="row"で囲む必要があります。これは、水平に整列させるためにトリックを行いますが、垂直に整列させるには、divをheightにする必要があります。 （注あなたはmd-input-containerが垂直方向に整列する方法に応じてお好みのheightを与えることができます）

<md-card flex="50"> 
    <div layout="row" layout-align="center center" style="min-height: 100%"> 
     <md-input-container class="md-block" flex="50"> 
      <input required type="text" placeholder="Observation Number" 
       ng-model="learningCenter.observations.obsNum"/> 
     </md-input-container> 
    </div> 
</md-card> 

Hereはあなたのコードの作業フォークです：あなたのmd-cardは次のようになります。