Today I've been working on a simple login page where I had to align the login box vertically, quite prosaic problem: How do I align the box vertically center?
For me answer is simple, do not. If we prefer to create a simple and responsive design for mobile also we should resign from some fancy tricks to align things center, unless you have to. So I decided to create more generic and simple solution for it. I'm using LESS, so I've written simple script to generate classes set in a spirit of Bootstrap :-)
Take a look below.
Just a quick explanation. First I declare simple mixin executing itself recursievly, decreasing offset, so we receive a simple loop solution. Inside I've put two classes
v-top-XXX and
v-bottom-XXX with margins generated arbitraly for my application. You can choose any different value than 30em as a maximum.
Simple usage:
Hope the solution will help :-)
Comments
Post a Comment