GumbyFramework / Gumby

A Flexible, Responsive CSS Framework - Powered by Sass
http://gumbyframework.com/
2.85k stars 440 forks source link

Vertical alignment with valign appears to be broken #264

Open Toddses opened 9 years ago

Toddses commented 9 years ago

Using the class valign as shown in the docs does not work as expected. You end up with a div locked at 400px height, and some other properties which makes things crazy.

I took at look at the CSS being used on the site and compared it to the compiled CSS from the repo. They're different.

On the site:

.valign {
  display: table;
  width: 100%;
}
.valign > div, .valign > article, .valign > section, .valign > figure {
  display: table-cell;
  vertical-align: middle;
}

In the repo:

.valign:before {
  content: ' ';
  display: inline-block;
  height: 400px;
  vertical-align: middle;
  margin-right: -0.25em;
}
.valign > div, .valign > article, .valign > section, .valign > figure {
  display: inline-block;
  vertical-align: middle;
}