Materialize: .valign-wrapper issues? Or documentation?

[lpgeiger]

Some unexpected issues come up with .valign-wrapper and .valign.

.center-align seems to interfere with .valign-wrapper.
.col seem to interfere with it, for example: issue #1051

Also the docs show an tutorial using .valign, nested in .valign-wrapper. Is this deprecated?

[Dogfalo]

To understand fully how valign works you may want to take a look at the implementation below, it uses flexbox so it will conflict with .col which has float:left

.valign-wrapper {
  @include flexbox();
  @include align(center);

  .valign {
    display: block;
  }
}

[clintharris]

I had the same issue. Using center-block instead of center fixed the issue:

<div className="valign-wrapper">
    <div className="valign center-block">Blerg!</div>
</div>

Had tip to this post for pointing out the solution: http://stackoverflow.com/a/31214741/62694

[andybonner]

I found a workaround, at least for vertical centering. I was not actually going for horizontally centered, just vertically Here's what I had:

<div class="row">
  <div class="card-image col s3 valign-wrapper>
    <img class="responsive-img valign">

Another col div in the row was taller than this image one, stretching the height of the row to more than the image, so valign did nothing to fill the empty space and the <div class="card-image>" just hung out at the top.
I slapped on a CSS rule of

.card-image {
  height: 100%;
}

, and now it had room to vertically center the image.