Центрированная форма с материальным дизайном lite

Я ищу удобную форму входа в систему с помощью 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; чувствуют себя действительно yucky!

Ответы

Ответ 1

Как насчет использования "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;
}

Оба параметра отлично подходят при изменении размера.

Ответ 2

Вы можете использовать '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>

Ответ 3

Почему бы не использовать класс mdl-cell--N-offset? Как указано в параметрах "Компоненты → Макет → Сетка → " в https://getmdl.io/components/index.html#layout-section/grid:

MDL-клеток - N-смещение

Добавляет N столбцов пробелов перед ячейкой

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

Это должно работать.

Ответ 4

Просто добавьте эти правила CSS:

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

а затем поместите содержимое в этот контейнер:

<div class="mdl-layout">
  <!-- Your Content -->
</div>

Ответ 5

Я не знаком с библиотекой материалов Google Material Design Lite, но почему бы просто не сделать элемент "контейнер", обертывающий столбцы? Пример:

CSS

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

HTML:

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

Затем оттуда по желанию можно поместить полный столбец ширины.