Created
July 25, 2012 18:33
-
-
Save abhoopathy/3177757 to your computer and use it in GitHub Desktop.
Less mixin for v-centering
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* A less mixin for vertical centering | |
* Consider a parent div with { height: 70px, position: relative } | |
* | |
* Case 1: Text div with no height | |
* .textdiv { | |
* .v-center(70px, text) //where 70px is parent div height | |
* } | |
* | |
* Case 2: Div with it's own height (uses absolute positioning) | |
* .nontextdiv { | |
* .v-center(30px) //where 30px is the height of the child div | |
* } | |
* | |
*/ | |
.v-center (@parent_h: 50px, text) { | |
line-height: @parent_h; | |
} | |
.v-center (@h: 20px) { | |
position: absolute; | |
height: @h; | |
margin-top: @h * -0.5; | |
top: 50%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment