Question

对于如何在实现中使列水平居中对齐，我感到困惑！我尝试使用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

要使用offset，您必须将列的宽度设置为某个值，然后行宽度12 - column width的其余部分应除以2，因此在您的情况下，如果列宽为3，则其余部分width是9列，应该在列之前为4.5，在列之后为4.5，这是我们无法实现的列，但是当列宽为4时可以达到，因此我们有offset-4可以实现对齐< / p>

<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！您无需网格即可达到相同的结果。

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

2 个答案: