如何在 Materialise CSS 中水平对齐列？

Question

我只是对如何在 materialize 中水平居中对齐一列感到困惑！我尝试使用 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>

我想水平居中对齐这些输入字段！！！

Answer 1

将此样式添加到您的页面，

.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>

Answer 2

要使用偏移量，您必须将列宽设置为某个值，然后行宽的其余部分 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 作为一栏！你可以在没有网格的情况下达到相同的结果。

如何在 Materialise CSS 中水平对齐列？

How to horizontally align column in Materialize CSS?

css

materialize