Nano Hash - криптовалюты, майнинг, программирование

Горизонтальное и вертикальное выравнивание в materialize framework

Как я могу центрировать поле входа в систему как по горизонтали, так и по вертикали?

Вот моя структура:

<div class="container">
<div class="row">
<div class="col s12 m6">
    <div class="card">
        <div class="card-content">
            <span class="card-title black-text">Sign In</span>
            <form>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                        <label for="firstname" class="active">First Name</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                        <label for="lastname" class="active">Last Name</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-action">
            <input type="submit" class="btn" value="Sign In">
        </div>
    </div>
</div>

Я пытался использовать классы valign-wrapper и valign, но это не сработало.

material-design html css materialize
06.08.2015

  • Какой css вы пробовали? 06.08.2015
  • Вы искали в Google вертикальное и горизонтальное центрирование CSS? На это есть куча руководств. 06.08.2015
  • Нет, я использую materialize framework, а не чистый css. 06.08.2015
  • Вы можете попробовать использовать position: absolute; и сместить его на 50% высоты и ширины элемента, в котором он находится, трудно сказать, будет ли это полезно, не зная, что делает остальная часть вашего кода. 06.08.2015
  • Я бы, скорее всего, добавил margin-left: ; или поле справа: ; и верхняя граница:; или нижняя граница:; , таким образом, вы можете перемещать его. Если ни один из них ничего не делает, вы можете попробовать position: absolute;, но это может вызвать больше проблем. 11.11.2015

Ответы:


1

Вот правильный (materializecss) способ сделать это и без грязного css:

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
    <div class="valign" style="width:100%;">
        <div class="container">
           <div class="row">
              <div class="col s12 m6 offset-m3">
                 <div class="card">
                    <div class="card-content">
                       <span class="card-title black-text">Sign In</span>
                       <form>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                                <label for="firstname" class="active">First Name</label>
                             </div>
                          </div>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                                <label for="lastname" class="active">Last Name</label>
                             </div>
                          </div>
                       </form>
                    </div>
                    <div class="card-action">
                       <input type="submit" class="btn" value="Sign In">
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
</div>
14.11.2016
  • «правильно» для materialize = создать массу div с добавлением тегов стиля? 29.09.2019

    • 2

    Просто используйте offset для выравнивания. Сместите представление карты на половину того, что осталось.

    <div class="container">
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card">
        <div class="card-content">
          <span class="card-title black-text">Sign In</span>
          <form>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                <label for="firstname" class="active">First Name</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                <label for="lastname" class="active">Last Name</label>
              </div>
            </div>
          </form>
        </div>
        <div class="card-action">
          <input type="submit" class="btn" value="Sign In">
        </div>
      </div>
    </div>
    28.02.2016
  • Это не выравнивается по вертикали, как указано. Смотрите мой ответ ниже. 14.11.2016
  • Это работает, но для вертикального выравнивания вам просто нужно обернуть его в <main class="valign-wrapper"></main> или что-то подобное в зависимости от структуры страницы. 07.03.2020

    • 3

    Попробуйте это решение, надеюсь, оно вам поможет

    .card {
     position: absolute;
     left: 50%;
     top: 50%;
     -moz-transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
     -ms-transform: translate(-50%, -50%)
     -o-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%);
}

    Также вы можете попробовать

    body (or container-div) {
    display: flex;
    align-items: center;
    justify-content: center;
}
    17.02.2016

    4

    ты пытался

    .col.s12.m6{
    float: none;
    margin: 100px auto;
    width: 300px;
    height: 300px;
}

    Проверьте эту скрипту, http://fiddle.jshell.net/8vu47fb2/

    используйте margin-top, margin-bottom, чтобы выровнять поле по центру.

    13.11.2015

    5

    Установить свойство выравнивания текста div

    <div class="input-field col s12" style="text-align:center">

<div class="input-field col s12" style="text-align:center">

 <input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle">

<input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle">

    см. здесь http://jsfiddle.net/kuqqdswg/

    13.11.2015
  • В материализации это то же самое, что и .center-align 11.09.2017

    • 6

    Вам нужно наследовать полную высоту, начиная с тегов html и body.

    03.01.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..