Skip to content

Instantly share code, notes, and snippets.

@taniarascia
Created February 9, 2016 17:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taniarascia/c7f87847b4ed3086c691 to your computer and use it in GitHub Desktop.
Save taniarascia/c7f87847b4ed3086c691 to your computer and use it in GitHub Desktop.
Inline block mixin
@mixin inline-block-lr($container,$left,$right){
#{$container}{
text-align: justify;
&:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
}
#{$left} {
display: inline-block;
vertical-align: middle;
}
#{$right} {
display: inline-block;
vertical-align: middle;
}
}
It accepts 3 parameters. The container, the left and the right element. For example, to fit the question, you could use it like this:
@include inline-block-lr('header', 'h1', 'nav');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment