CODEWITHSUNDEEP
htmlcssmaterial-designmaterialize
IMB
IMB

Reputation: 15889

Vertical align a side by side column in MaterializeCSS

How do you typically vertical align "middle" the button in this example:

<div class="row">

  <div class="col s1">
    <h1>Foo</h1>
  </div>

  <div class="col s11 right-align">
    <a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
  </div>

</div>

https://jsfiddle.net/zg9cjmr3/

As soon as I add valign-wrapper in the second inner div, it gets messed up:

https://jsfiddle.net/zg9cjmr3/1/

Upvotes: 0

Views: 179

Answers (1)

Matt.M
Matt.M

Reputation: 84

Add the valign-wrapper class to the row. 

<div class="row valign-wrapper">

  <div class="col s1">
    <h1>Foo</h1>
  </div>

  <div class="col s11 right-align">
    <a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
  </div>

</div>

Upvotes: 2

Related Questions