How to Center Text Inputs Using Materialize CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
    <div class="row">
        <form class="col s8 push-s2" onSubmit={formSubmit}>
            <h2>Login</h2>
            <div class="row">
                <div class="input-field col s12">
                    <label for="username">Username</label>
                    <input name="username" type="text" />
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input name="password" type="password" />
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input type="submit" value="submit" class="btn waves-effect waves-light" />
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                 <p>Don't have an account? <strong><a href="/register">Register</a></strong></p>
                </div>
            </div>
        </form>
    </div>
</div>

How to align two input texts on a line in Materialize?

In order to center the inputs you can add offsets to your first column:

<div class="input-field col s3 offset-s3">
    <input id="Valor1" type="text" class="validate" maxlength="10">
    <label for="Valor1">Valor 1</label>
</div>

The entire length of your row is 12 columns. Your two inputs have a total of 6 columns. With an offset of 3 columns on the left you get your desired centering of your elements.

Aligning materializecss Radio buttons and Text area

The solution

1. The Yes and No radio buttons are overlapping

The simplest solution is just to wrap this part of the code with a div (i.e., <div id="wrapper"> in the JSFiddle below). Adding an id is not necessary, it just for the purpose that you can understand what I'm talking about. See the JSFiddle snippet here.

2. I would like to have the radio buttons within two column widths and the text area to cover 8 column widths, but this is not working

I think it's working, but the problem is that text overlaping the line is caused because there is not enough space. In other words, the text is too long. If you change <div class="input-field col s8 m8 l8"> to <div class="input-field col s10 m10 l10"> this problem mainly dissappears, but at some specific browser window widths the problem still persists.

The same thing applies to "What is the LIKELY causative Micro-organisms?". Change <div class="input-field col s12 m6 l4"> to <div class="input-field col s12 m12 l12">. See the JSFiddle snippet here.

Let me know if this is helpful.

Cant Center text with materializecss

You are using the class center:

<div class="card-content valign center">

That class just adds text-align: center. That is, it centers inline content inside that block, but doesn't center the block itself.

To do that, you should use the class center-block instead:

<div class="card-content valign center-block">

That class sets margin-left and margin-right to auto. That centers the block (or the flex item, in this case; see 8.1. Aligning with auto margins).

@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';

<div class="row">  <div class="col s12 m7">    <div class="card valign-wrapper">      <div class="card-content valign center-block" >        <div class="row">          <h3 class="center-align orange-text text-darken-2"> 406 </h3>          <p class="center-align">Beers Tasted</p>        </div>       </div>    </div>  </div></div><div class="row">  <div class="col s12 m7">    <div class="card valign-wrapper">      <div class="card-content valign center-block" >        <div class="row">          <h3 class="center-align orange-text text-darken-2"> 26 </h3>          <p class="center-align">Breweries Visited</p>        </div>       </div>    </div>  </div></div>

<div class="card-content green-text center">

@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css');

<div class="row">  <div class="col s12">    <div id="card-alert" class="card green lighten-5">      <div class="card-content green-text center">        <p>Successfully added a product!</p>      </div>      <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">        <span aria-hidden="true">×</span>      </button>    </div>  </div></div>