Как выровнять столбец по горизонтали в Materialize CSS?

Я просто не понимаю, как мы можем выровнять столбец по горизонтали в материализованном виде! Я пробовал использовать offset-m, но он не центрировался.

Пожалуйста помоги!

<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type = "text/css" rel = "stylesheet">
<div class = "row">
  <h3 class = "center-align">Welcome</h3>
  <form class = "col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class = "row">
      <div class = "col s3">
        <input type = "text" id = "first_name" placeholder = "First Name" name = "first_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "text" id = "last_name" name = "last_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "email" id = "email" name = "email">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "password" id = "password" name = "password">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "submit" class = "btn">
      </div>
    </div>
  </form>
</div>

Я хочу выровнять эти поля ввода по центру по горизонтали !!!

css materialize

24.06.2018 14:22

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

4 924

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

добавьте этот стиль на свою страницу,

.row .col{
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

.row .col{
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type = "text/css" rel = "stylesheet">
<div class = "row">
  <h3 class = "center-align">Welcome</h3>
  <form class = "col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class = "row">
      <div class = "col s3">
        <input type = "text" id = "first_name" placeholder = "First Name" name = "first_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "text" id = "last_name" name = "last_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "email" id = "email" name = "email">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "password" id = "password" name = "password">
      </div>
    </div>
    <div class = "row">
      <div class = "col s3">
        <input type = "submit" class = "btn">
      </div>
    </div>
  </form>
</div>

Прохладный. Однако лучше добавить вспомогательные классы.

— 24.06.2018 14:46

24.06.2018 14:32

Чтобы использовать смещение, вы должны установить ширину столбца на определенное значение, тогда остальная часть ширины строки 12 - column width должна быть разделена на 2, поэтому в вашем случае, если ширина столбца равна 3, остальная часть ширины составляет 9 столбцов, которые должны быть 4.5 перед столбцом и 4.5 после него, которых мы не можем достичь с помощью материализованных столбцов, но мы могли бы достичь его, когда ширина столбца равна 4, поэтому у нас есть offset-4 для достижения выравнивания

<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type = "text/css" rel = "stylesheet">
<div class = "row">
  <h3 class = "center-align">Welcome</h3>
  <form class = "col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class = "row">
      <div class = "col s4 offset-s4">
        <input type = "text" id = "first_name" placeholder = "First Name" name = "first_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col s4 offset-s4">
        <input type = "text" id = "last_name" name = "last_name">
      </div>
    </div>
    <div class = "row">
      <div class = "col  s4 offset-s4">
        <input type = "email" id = "email" name = "email">
      </div>
    </div>
    <div class = "row">
      <div class = "col  s4 offset-s4">
        <input type = "password" id = "password" name = "password">
      </div>
    </div>
    <div class = "row">
      <div class = "col  s4 offset-s4">
        <input type = "submit" class = "btn">
      </div>
    </div>
  </form>
</div>

Примечание: Я не понимаю, почему вы используете row только для одной колонки! вы можете достичь того же результата без сетки.

Это примечание. Я хотел прокомментировать то же самое.

— 24.06.2018 14:51

Идеально! Понятно

— 24.06.2018 17:49

24.06.2018 14:42