title: how to center align vertically within slider
body: <p>Has anyone figured out how to center align vertically content within a slider (caption and such)?
  I've attempted to use the valign-wrapper and valign as designated but it doesn't do anything.
  I've also attempted some of the other css tricks for center aligning vertically but nothing seems to work.</p>
  
  <p>HTML Slider:</p>
  
  <pre><code>&lt;div class="slider valign-wrapper"&gt;
      &lt;ul class="slides"&gt;
        &lt;li&gt;
          &lt;img src="http://lorempixel.com/580/250/nature/1"&gt; &lt;!-- random image --&gt;
          &lt;div class="valign caption center-align"&gt;
            &lt;h3&gt;This is our big Tagline!&lt;/h3&gt;
            &lt;h5 class="light grey-text text-lighten-3"&gt;Here's our small slogan.&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://lorempixel.com/580/250/nature/2"&gt; &lt;!-- random image --&gt;
          &lt;div class="valign caption left-align"&gt;
            &lt;h3&gt;Left Aligned Caption&lt;/h3&gt;
            &lt;h5 class="light grey-text text-lighten-3"&gt;Here's our small slogan.&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://lorempixel.com/580/250/nature/3"&gt; &lt;!-- random image --&gt;
          &lt;div class="valign caption right-align"&gt;
            &lt;h3&gt;Right Aligned Caption&lt;/h3&gt;
            &lt;h5 class="light grey-text text-lighten-3"&gt;Here's our small slogan.&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="http://lorempixel.com/580/250/nature/4"&gt; &lt;!-- random image --&gt;
          &lt;div class="valign caption center-align"&gt;
            &lt;h3&gt;This is our big Tagline!&lt;/h3&gt;
            &lt;h5 class="light grey-text text-lighten-3"&gt;Here's our small slogan.&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>