Skip to content

Instantly share code, notes, and snippets.

@mandx

mandx/dabblet.css

Created April 21, 2012 22:17
Show Gist options
  • Save mandx/2439944 to your computer and use it in GitHub Desktop.
Save mandx/2439944 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mandx revised this gist Apr 21, 2012. No changes.
  2. mandx created this gist Apr 21, 2012.
    32 changes: 32 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    /**
    * 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;

    /* Make it pretty */
    background: slategray;
    text-align: center;
    border-radius: .3em;
    color: #405060;
    font: bold 150% sans-serif;
    text-shadow: 0 2px 1px hsla(0,0%,100%,.2);
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div>OMG, I’m centered!</div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}