How to align an inline-block horizontally and vertically?

HTML

<div id="header" class="display-table parent-width">
    
    <a id="logo" class="display-table-cell">
        <img class="logo1" src="http://lorempixel.com/output/food-h-c-151-185-8.jpg"/>
    </a>
    
    <div id="dates" class="display-table-cell vertical-align-middle to-right-inline">
        
        <div class="display-inline-table"> 
            <div class="display-table-cell vertical-align-middle">
                <img class="logo2" src="http://lorempixel.com/output/food-q-c-30-30-4.jpg" />
            </div>
            <div class="display-table-cell vertical-align-middle to-left-inline">
                <div id="hijri-date">2 Ramadhaan, 1435 AH</div>
                <div id="gregorian-date">Sunday 29 June 2014</div>
            </div>
        </div>  
        
    </div>
    
</div>

CSS

.display-table {
    display: table;
}
.display-inline-table {
    display: inline-table;
}
.display-table-cell {
    display: table-cell;
    outline: 1px solid red;
}
.display-inline-block {
    display: inline-block;
}
.parent-width {
    width: 100%;
}
.vertical-align-middle {
    vertical-align: middle;
}
.to-right-inline {
    text-align: right;
}
.to-left-inline {
    text-align: left;
}

#header {
    background: #fff;
    padding: 15px;
    background: #ccc;
}
#dates {
    text-align: right;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
}
.logo1 {
    width: 150px;
    height: 200px;
    vertical-align: bottom; 
    display: inline-block;
}
.logo2 {
    padding-right: 10px;
}