Skip to content

Instantly share code, notes, and snippets.

@teetteet

teetteet/dabblet.css

Forked from giuseppeg/dabblet.css
Created November 7, 2013 18:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save teetteet/7359778 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save teetteet/7359778 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. teetteet revised this gist Nov 7, 2013. No changes.
  2. @giuseppeg giuseppeg created this gist Nov 7, 2013.
    49 changes: 49 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    /**
    * Dead Center an element with display: inline-block
    */

    html,
    body { margin: 0; height: 100%; }

    .container {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
    text-align: center;
    height: 100%;
    }

    .container:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    background-color: red;
    height: 100%;
    }

    .container > .content {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
    text-rendering: auto;
    text-align: left;
    }

    /* useless fancyness */
    body { background-color: #eee; }

    h1 {
    margin-top: 0;
    font-size: 1.2em;
    }

    .container > .content {
    width: 100%;
    max-width: 440px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 2px #ccc;
    background-color: #fff;
    }
    7 changes: 7 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <div class="container">
    <div class="content">
    <h1>Dead Center an element with display: inline-block</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisl ut lacus adipiscing fringilla ut eget orci.</p>
    <a href="http://twitter.com/giuseppgurgone">@giuseppegurgone</a>
    </div>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}