时间戳

首页 > 解决方案 > 如何在 Materialise CSS 中水平对齐列？

css - 如何在 Materialise 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>

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

标签： cssmaterialize

解决方案

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

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

推荐阅读