vertical-align example

by Richard Hunter

HTML

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

CSS

.alpha { 
    background : red; 
    display : inline-block;
    
    vertical-align : top;
}
.beta { 
    background : blue; 
   
    
}
.gamma { 
    background : green;
    
}

.delta {
    
    background : yellow;
    display : inline-block;
    height : 50px;
    vertical-align : middle;
}





.container { 
    background : pink;
    padding : 20px;
    margin : 20px;
    height : 100px;
    

}