Skip to content

Instantly share code, notes, and snippets.

@marceux

marceux/vertical-centering.css

Last active August 29, 2015 14:06
Download ZIP

Revisions

  1. marceux revised this gist Nov 11, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions vertical-centering.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /* This parent can be any width and height */
    .block {
    text-align: center;
    // Any Property
    }

    /* The ghost, nudged to maintain perfect centering */
    @@ -17,5 +17,4 @@
    .centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    }
  2. marceux created this gist Sep 7, 2014.
    21 changes: 21 additions & 0 deletions vertical-centering.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /* This parent can be any width and height */
    .block {
    text-align: center;
    }

    /* The ghost, nudged to maintain perfect centering */
    .block:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
    }

    /* The element to be centered, can
    also be of any width and height */
    .centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    }