title: How to align an inline-block horizontally and vertically
body: <p>What is the best/cleanest using <code>CSS</code> to align the <code>#dates div</code> to the right side of the header, and vertically in the middle.</p>
  
  <p>I tried <code>float: right</code>, but that does not allow the <code>vertical-align</code>. I want to avoid using floats, so I am using <code>inline-block</code>, and using relative positioning. Is there a more correct approach?</p>
  
  <p>I do not like the fact that I have to do a top of 30px, and using trial and error until it centers.</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;a id="logo" href="~/" runat="server"&gt;
          &lt;img src="Images/Interface/logo.png" alt="logo" /&gt;
      &lt;/a&gt;
      &lt;div id="dates"&gt;
          &lt;div id="hijri-date"&gt;2 Ramadhaan, 1435 AH&lt;/div&gt;
          &lt;div id="gregorian-date"&gt;Sunday 29 June 2014&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #header
  {
      background-color: white;
      padding: 15px;
      position: relative;
  }
  
  #logo
  {
      display: inline-block;
      vertical-align: middle;
  }
  
      #logo img
      {
          vertical-align: bottom; /* to get rid of text descender space underneath image */
      }
  
  #dates
  {
      display: inline-block;
      position: absolute;
      right: 30px;
      top: 30px;
      font-size: 14px;
      font-family: 'Open Sans';
      color: #696969;
      background: url(Images/Interface/date-icon.png) no-repeat;
      background-position-y: center;
      padding-left: 32px;
  }
  </code></pre>