如何使用Materialize CSS将文本输入居中? [英] How to center text inputs using Materialize CSS?

问题描述

我正在尝试使用Materialize CSS将输入文本居中，但是"center"和"center-align"类似乎没有任何作用.我无法弄清楚我在这里想念什么

 < div class ="section">< div class ="row center-align">< div class ="input-field col s3 center-align">< input id ="email" type ="email" class ="validate">< label for ="email"> Email</label></div></div>< div class ="row">< div class ="input-field col s3 center-align">< input id ="password" type ="password" class ="validate">< label for ="password">密码</label></div></div></div> 

解决方案

.center-align 仅适用 text-align:center; ，对浮动元素无效

使用其网格类: col s4 offset-s4 :

 < link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css>< script src ="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>< div class ="section">< div class ="row">< div class ="input-field col offset-s4 s4">< input id ="email" type ="email" class ="validate">< label for ="email"> Email</label></div></div>< div class ="row">< div class ="input-field col offset-s4 s4">< input id ="password" type ="password" class ="validate">< label for ="password">密码</label></div></div></div>  

要使其具有响应性，您可以使用不同的偏移量来播放不同的宽度:

 < link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css>< script src ="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>< div class ="section">< div class ="row">< div class ="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">< input id ="email" type ="email" class ="validate">< label for ="email"> Email</label></div></div>< div class ="row">< div class ="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">< input id ="password" type ="password" class ="validate">< label for ="password">密码</label></div></div></div>  

I am trying to center an input text using Materialize CSS but the "center" and "center-align" classes seem to have no effect. I cannot figure out what am I missing here

<div class="section">
<div class="row center-align">
    <div class="input-field col s3 center-align">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
    </div> 
</div>      
<div class="row">
        <div class="input-field col s3 center-align">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
</div>
</div>

解决方案

.center-align only applies text-align: center; which has no effect on floating elements.

Use their grid classes: col s4 offset-s4:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="section">
  <div class="row">
    <div class="input-field col offset-s4 s4">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col offset-s4 s4">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
</div>

To make it responsive, you can play with different offsets for different widths:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="section">
  <div class="row">
    <div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
</div>

这篇关于如何使用Materialize CSS将文本输入居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！