Skip to content

Instantly share code, notes, and snippets.

@autarc
Created April 20, 2012 00:36

Revisions

  1. autarc created this gist Apr 20, 2012.
    25 changes: 25 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    /**
    * Vertical centering with Flexbox + margin fallback
    * Lea Verou & David Storey
    */

    html, body { height: 100%; }

    body {
    width: 100%; /* needed for FF */
    margin: 0;

    /* Flexbox hawtness */
    display: box; display: flexbox;
    box-align: center; flex-align: center;
    box-pack: center; flex-pack: center;
    }

    div {
    padding: 1em 1.5em;

    /* Fallback to look decent w/out Flexbox */
    max-width: 10em;
    margin: 1em auto;

    }
    1 change: 1 addition & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <img src="http://30.media.tumblr.com/avatar_7331c8ed0527_128.png"><div>
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}