Vertical align (dynamic)

Demonstration of how inline element can be dynamicaly vertical aligned

by Pavle Lucic

HTML

<div class="forInline"> <span class="inline">This is inline</span> 
</div>
<div class="forInlineBlock"> <span class="inline-block">This is inline-block</span> 
</div>

CSS

/* ==============================
    EXAMPLE FOR INLINE ELEMENTS 
    ============================*/
 div.forInline {
    background:gray;
    height:200px;
    /* Needs to have height */
}
/* inline element that we want to verticaly align */
 .inline {
    vertical-align:middle;
    /* desired align */
}
/* Element vs we want to make align */

/* this is necessary */
 .inline:after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
    /* this is important */
}
/* ==============================
    EXAMPLE FOR INLINE+BLOCK ELEMENTS 
    ============================*/
 div.forInlineBlock {
    height:200px;
    /* Needs to have height */
    background:#ABBEB6;
}
.inline-block {
    display:inline-block;
    height:100%;
    /* this is important */
    vertical-align:middle;
}
.inline-block:after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%
    /* this is important */
}