Search code examples
htmlcssmaterial-designmaterialize

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

I would like to center two input texts on Materialize.css, but the results are not good when i try to do that. That's the code:

<div class="card-content valign center">
    <div class="row">
        <form class="col s12">
            <div class="row">
                <div class="input-field col s3">
                    <input id="Valor1" type="text" class="validate" maxlength="10">
                    <label for="Valor1">Valor 1</label>
                </div>
                <div class="input-field col s3">
                    <input id="Valor2" type="text" class="validate" maxlength="10">
                    <label for="Valor2">Valor 2</label>
                </div>
            </div>
        </form>
    </div>
</div>

Here there is a lot of text fields for example: Materalize Text Fields

Solution

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