title: display: inline block and vertically centred
body: <p>I have three divs and I want them to display beside each other and centred. It goes image, 1px divider then text. I want them to be vertically centred compared to the ones beside them.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="sub-logo-wrap"&gt;
          &lt;div class="sub-logo"&gt;&lt;img src="..." width="auto" height="30px" /&gt;&lt;/div&gt;            
          &lt;div class="divider"&gt;&lt;/div&gt;
          &lt;div class="sub-logo-text"&gt;&lt;p&gt;text ... can be more than one line ... &lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.sub-logo-wrap &gt; div { 
    display: inline-block; 
  }
  
  .divider { 
    width: 1px;
    height: 20px;
  }
  
  .sub-logo-text { 
    width: 150px; 
  }
  </code></pre>
  
  <p>the problem is when the text goes to more than one line the centering of the text no longer works</p>