Skip to content

Instantly share code, notes, and snippets.

@mistergraphx

mistergraphx/SassMeister-input-HTML.html

Last active February 8, 2018 18:00
Show Gist options
  • Save mistergraphx/0b8c9e9d051450c206da to your computer and use it in GitHub Desktop.
Save mistergraphx/0b8c9e9d051450c206da to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="container">
<img class="item-aligned" src="http://lorempixel.com/400/200" />
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
/* # Vertical-align
Use it to verticaly align an element, in a container
Source
: <http://www.developerdrive.com/2014/11/15-essential-sass-mixins/>
@mixin vertical-align - verticaly align an element, in a container
Styleguide libs.mixins.positionning.vertical-align
*/
$autoprefixing: false !default;
@mixin vertical-align {
position: relative;
top: 50%;
@if $autoprefixing == true {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
transform: translateY(-50%);
}
.container{
box-sizing: border-box;
width: 600px;
height: 600px;
border: 1px solid silver;
border:0;
.item-aligned{
@include vertical-align();
margin:0 auto;
display:block;
width:100%;
}
}
Raw
SassMeister-output.css
/* # Vertical-align
Use it to verticaly align an element, in a container
Source
: <http://www.developerdrive.com/2014/11/15-essential-sass-mixins/>
@mixin vertical-align - verticaly align an element, in a container
Styleguide libs.mixins.positionning.vertical-align
*/
.container {
box-sizing: border-box;
width: 600px;
height: 600px;
border: 1px solid silver;
border: 0;
}
.container .item-aligned {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
display: block;
width: 100%;
}
Raw
SassMeister-rendered.html
<div class="container">
<img class="item-aligned" src="http://lorempixel.com/400/200" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment