Как выровнять два входных текста на строке в Materialise?

Question

Я хотел бы центрировать два входных текста на Materialize.css, но результаты не очень хорошие, когда я пытаюсь это сделать.Вот код:

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

Здесь много текстовых полей, например: Матерализовать текстовые поля

Answer 1

Чтобы центрировать входы, вы можете добавить смещения к первому столбцу:

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

Вся длина строки составляет 12 столбцов.Ваши два входа имеют в общей сложности 6 столбцов.Со смещением в 3 столбца слева вы получаете желаемое центрирование ваших элементов.