title: CSS vertical align inside a FIXED position div
body: <p>I have a header: FIXED position.</p>
  
  <p>Here is css:</p>
  
  <pre><code>#header{
      position:fixed;
      height: 6em;
      display:block;
      width: 100%;        
      background: rgba(255, 255, 255, 1);
      z-index:9;
      text-align:center;
      color: #000000; 
  }
  </code></pre>
  
  <p>And inside, I want to center text middle and vertical middle.
  Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
     &lt;div id="bandname"&gt;Bewolf Photography&lt;/div&gt;
     &lt;div id="insta"&gt;&lt;img  src="imgs/insta.png" width="40" alt="tablets" /&gt;&lt;/div&gt;
     &lt;div id="bandname"&gt;Bewolf Photography&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS for text and image:</p>
  
  <pre><code>#bandname
  {
     display: inline-block;
     font-size: 2.8em;
     padding: 0px 0px 0 0;
     vertical-align: middle;
     background: rgba(0, 255, 0, 1);
  }
  
  #insta { 
   display: inline-block;
   padding: 0px 0px 0px 50px;
   vertical-align: middle;
  }
  </code></pre>
  
  <p>I just can't figure that one out... </p>
  
  <p>I tried using </p>
  
  <pre><code>   line-height:  6em;  
  </code></pre>
  
  <p>Help would be appreciated.. .thanks
  but that doesn't work either.</p>