vertical-align experiments

by Richard Hunter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<h1>Vertical align</h1>

<a href="http://christopheraue.net/2014/03/05/vertical-align/">vertical align tutorial</a>

<div class="container">x <span class="alpha">alpha</span>
 <span class="beta">beta</span>
 <span class="gamma">gamma</span>

    <br/>x<i class="fa fa-pinterest-p"></i><span class="hello">hello</span>

</div>

SCSS

body {
    background : #ddd; 
}
.container {
    background : white;
    border : solid 1px black;
    margin : 20px;
    height : 400px;
    font-size : 15px;
    
    .alpha {
        background : red;
        height : 50px;
        display : inline-block;
        vertical-align : text-bottom;
    }
    .beta {
        background : blue;
        height : 50px;
        display : inline-block;
        vertical-align : text-top;
    }
    .gamma {
        font-size : 40px;
        background : green;
        vertical-align : middle;
    }
    .delta {
        height : 150px;
        background : yellow;
        display : inline-block;
        width : 10px;
        vertical-align : bottom;
    }
    .epsilon {
        background : pink;
        line-height : 150px;
        vertical-align : middle;
        font-size : 100px;
    }
    .fa { font-size : 40px; line-height : 50px; vertical-align : middle;}
    .hello { font-size : 20px; padding-left : 5px;}
}