How to vertically center in yui-pure-css?

Question

I use purecss (purecss.io), which works fantastic so far, but I haven't managed to vertically center anything in their responsive grid.

I have a div (class="pure-u-1-3") with automatically has the height of it's parents element. I would like to vertically center a form (tried wrapping in a div too) inside this. I tried everything I found on StackOverflow and many other sources online. Unfortunately it seems that pure-css is destroying it.

Any ideas?

Did you manage to find the answer to your question? – Oct 14 '14 at 22:26 — , Oct 14 '14 at 22:26
No, unfortunately not. – sebastiansieber Oct 16 '14 at 03:09 — sebastiansieber, Oct 16 '14 at 03:09
I managed to work it out, see my answer. – Oct 17 '14 at 21:23 — , Oct 17 '14 at 21:23

score 3 · Accepted Answer · answered Oct 17 '14 at 21:22

.pure-g-valign-fix{display:block;}

Use class above to fix the vertical align issue with PureCSS in it's grids. Use CSS class alongside the pure-g class like so:

<div class="pure-g pure-g-valign-fix">

Doing this will bring back normal CSS behaviour for that row.

How to vertically center in yui-pure-css?

1 Answers1