web-dev-qa-db-ja.com

マテリアルデザインライトを備えた中央フォーム

Googleの Material Design Lite ライブラリを使用して、画面の中央にログインフォームを簡単に取得できるようにしています。

私は何度も繰り返しましたが、これが私が思いついた最高の方法です：

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

すべての画面サイズで中央フォームを実現するより良い方法はありますか？

&nbsp;のdivは、本当に不愉快です！

htmlcssmaterial-design-lite
36
Clarkie

「mdl-layout-spacer」の使用方法： codepen を参照

<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
    <div class="mdl-layout-spacer"></div>
</div>

または、CSSソリューションが必要な場合：中央揃えする列を含むグリッドに追加のクラスを追加します。 codepen を参照してください

<div class="mdl-grid center-items">
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
</div>

.mdl-grid.center-items {
  justify-content: center;
}

サイズ変更時に両方のオプションがナイスになります。

75
passerby

'mdl-typography--text-center'を使用できます：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-typography--text-center">
    My center div
   </div>
</div>
23
Maxxx

mdl-cell--N-offsetクラスを使用しないのはなぜですか？ https://getmdl.io/components/index.html#layout-section/grid のコンポーネント->レイアウト->グリッド->設定オプションで指摘されているように：

mdl-cell--Nオフセット

セルの前に空白のN列を追加します

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
    <p>Centered content!</p>
  </div>
</div>

これは動作するはずです。

15
Pedro Adame Vergara

これらのCSSルールを追加するだけです。

.mdl-layout {
  align-items: center;
  justify-content: center;
}

次に、このコンテナにコンテンツを配置します。

<div class="mdl-layout">
  <!-- Your Content -->
</div>
7
Paweł Hajduk

GoogleのMaterial Design Liteライブラリに慣れていませんが、列をラップする「コンテナ」要素を作成しないのはなぜですか。例：

CSS：

.customContainer {
    max-width: 960px;
    margin: 0 auto;
}

HTML：

<div class="customContainer">
    ...
</div>

その後、そこから必要に応じて全幅の列を配置できます。

5
Josh Salazar