37

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は本当に不機嫌です！

4

5 に答える 5

79

「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 ソリューションを使用する場合: 中央に配置する列を含むグリッドにクラスを追加します。コードペンを参照

<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;
}

サイズ変更時には、どちらのオプションもうまく機能します。

于 2015-08-21T09:51:36.887 に答える
24

使用できます'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>
于 2015-09-22T12:52:15.037 に答える
16

mdl-cell--N-offsetクラスを使用しないのはなぜですか？Components -> Layout -> Grid -> Configuration options in 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>

これはうまくいくはずです。

于 2016-05-30T19:29:54.287 に答える
7

次の CSS ルールを追加するだけです。

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

次に、コンテンツをこのコンテナーに入れます。

<div class="mdl-layout">
  <!-- Your Content -->
</div>
于 2015-10-06T15:59:16.537 に答える
5

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

CSS:

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

HTML:

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

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

于 2015-07-16T20:20:51.343 に答える