Materialize CSS: кнопки не выровнены по вертикали (но поля ввода имеют) внутри нижнего колонтитула

Question

Если я использую valign-wrapper с .btn в Материализации. css .page-footer, он не выравнивается по вертикали. например, следующее html:

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="col s12">
            <button class="btn btn-block waves-effect waves-light light-blue" type="submit" name="action">btn1</button>
        </div>
</footer>

производит:

Примечание: в моей таблице стилей у меня есть:

.btn-block
{
    width: 100%;
}

Чтобы кнопки с классом .btn-block соответствовали ширине их контейнера.

Если я заменю кнопку на .input-field, все будет работать так, как ожидается (т.е. выровнен по вертикали в нижнем колонтитуле). Например:

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="input-field col s12">
            <input placeholder="Input1" type="text" class="center-align">
        </div>
</footer>

производит:

.input-field">

Почему это происходит и как я могу выровнять мою кнопку по вертикали? Насколько я понимаю, .valign-wrapper должен сделать это для меня.

Обратите внимание, что в моем реальном приложении я добавляю несколько кнопок в нижний колонтитул; именно поэтому я использую класс .row с указанным количеством столбцов.

Answer 1

Хорошо, я вижу. У меня были проблемы с вертикальным выравниванием некоторых вещей в div'ах в Materialise. Обход может быть утомительным, но попробуйте что-то вроде этого.

HTML:

<footer class="page-footer">
  <div class="valign-wrapper row col 12" id="rowContainer">
     <div class="col s12">
       <button class="btn btn-block waves-effect waves-light light-blue" 
         type="submit" name="action">btn1</button>
    </div>
</footer>

CSS:

.valign-wrapper {
height:100px;
padding-top: 70px;
border-style: solid; /*just used to show footer height*/
border-color: black; /*just used to show footer height*/
}

.btn-block {
width: 100%;
}

Возможно, вам придется настройте строку

    padding-top: 70px;

, чтобы она соответствовала вашему футеру.

Вот кодовая ручка:

https://codepen.io/controllz/pen/mdyLRXQ

Я добавил границу в CSS, чтобы показать высоту нижнего колонтитула. Удалите это, когда вы получите это правильно. Надеюсь, это поможет.

Answer 2

Если я вас правильно понял, вы пытаетесь выровнять свои кнопки по вертикали? Вы можете добавить разрыв строки после каждого экземпляра в нижнем колонтитуле.

<footer class="page-footer">
<div class="valign-wrapper row col 12" id="rowContainer">
    <div class="col s12">
        <button class="btn btn-block waves-effect waves-light light-blue" 
type="submit" name="action">btn1</button>
      <br>
       <button class="btn btn-block waves-effect waves-light light-blue" 
type="submit" name="action">btn1</button>
      <br>
       <button class="btn btn-block waves-effect waves-light light-blue" 
type="submit" name="action">btn1</button>
    </div>
</footer>