title: how to make header title with buttons
body: <p>there is a ionic framework in which it is too easy to make header title  with two left and right buttons and it is responsive.In other words header title always in middle of page .</p>
  
  <p>here is code how they implement ..here is my plunker 
  <a href="http://plnkr.co/edit/BqtvCYYfhhbokzbbOXU4?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/BqtvCYYfhhbokzbbOXU4?p=preview</a></p>
  
  <p><a href="https://i.stack.imgur.com/Uzfjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uzfjs.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;ion-header-bar align-title="center" class="bar-positive"&gt;
    &lt;div class="buttons"&gt;
      &lt;button class="button" ng-click="doSomething()"&gt;Left Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;h1 class="title"&gt;Title!&lt;/h1&gt;
    &lt;div class="buttons"&gt;
      &lt;button class="button"&gt;Right Button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ion-header-bar&gt;
  </code></pre>
  
  <p>But same thing I need to implement using only HTML5 and css3 or css I tried but I am not able to set my button position  left and right .how to set button position left and right .</p>
  
  <p>here is my code
  <a href="http://plnkr.co/edit/OGr7px9jueIfDTsHhePA?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/OGr7px9jueIfDTsHhePA?p=preview</a></p>
  
  <pre><code>&lt;body&gt;
    &lt;div style="" class="header"&gt;
       &lt;button style="position:absolute;left:5px"&gt;left&lt;/button&gt;
     &lt;h2 style="margin:0px;padding-top:10px;color:white"&gt;Title !&lt;/h2&gt; 
     &lt;button style="position:absolute;right:5px"&gt;right&lt;/button&gt;
  &lt;/div&gt;
   &lt;/body&gt; 
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.header{
    background:blue;
    height:44px;
    text-align:center;
    position:relative;
  }
  </code></pre>