Material Design Liteカードを右手に整列する方法

Question

材料デザインのライトコンポーネントを使用しているカードを持つ単純なページを作成しようとしていますが、1つの問題がページの全体のレイアウトを張り巡らしています。 mdlカードを画面の右側に揃えるにはどうすればよいですか？私は試みましたフロート：右;がcssの場合、カードは画面に表示されない同じ列の右に移動します。役立つはずカードの左側にMDL-レイアウトスペーサーを使用してtext-align:right;

Answer 1

：私はそれは

<div class="mdl-cell mdl-cell--6-col"> 
 
    <div class="demo-card-wide mdl-card mdl-shadow--2dp"> 
 
     <div class="mdl-card__title"> 
 
      <h2 class="mdl-card__title-text">Welcome</h2> 
 
     </div> 
 
     <div class="mdl-card__supporting-text"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
      Mauris sagittis pellentesque lacus eleifend lacinia... 
 
     </div> 
 
     <div class="mdl-card__actions mdl-card--border"> 
 
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
 
       Get Started 
 
      </a> 
 
     </div> 
 
     <div class="mdl-card__menu"> 
 
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
 
       <i class="material-icons">share</i> 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

テキストを使用してみ合わせるにシフトするのに役立ちます。 mdl-layout-spacerはできるだけ多くのスペースを占有します。

<div class="mdl-grid"> 
    <div class="mdl-layout-spacer"></div> 
    <div class="mdl-cell mdl-cell--6-col"> 
    <div class="demo-card-wide mdl-card mdl-shadow--2dp"> 
     <div class="mdl-card__title"> 
     <h2 class="mdl-card__title-text">Welcome</h2> 
     </div> 
     <div class="mdl-card__supporting-text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris sagittis pellentesque lacus eleifend lacinia... 
     </div> 
     <div class="mdl-card__actions mdl-card--border"> 
     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
      Get Started 
     </a> 
     </div> 
     <div class="mdl-card__menu"> 
     <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
      <i class="material-icons">share</i> 
     </button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 3

このクラスmdl-typography--text-rightを試してみてください、この方法では、そのセルの内容はrightのアライメントを持っています：

<div class="mdl-cell mdl-cell--6-col mdl-typography--text-right"> 
    <div class="demo-card-wide mdl-card mdl-shadow--2dp"> 
     <div class="mdl-card__title"> 
      <h2 class="mdl-card__title-text">Welcome</h2> 
     </div> 
     <div class="mdl-card__supporting-text"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Mauris sagittis pellentesque lacus eleifend lacinia... 
     </div> 
     <div class="mdl-card__actions mdl-card--border"> 
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
       Get Started 
      </a> 
     </div> 
     <div class="mdl-card__menu"> 
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
       <i class="material-icons">share</i> 
      </button> 
     </div> 
    </div> 
</div> 

逆に：mdl-typography--text-centerとmdl-typography--text-leftも働きます。