title: How to align an element always center in div without giving width to its parent div?
body: <p>I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :</p>
  
  <ol>
  <li>Buttons </li>
  <li>Heading</li>
  <li>Logo</li>
  </ol>
  
  <p>buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
  <img src="https://i.stack.imgur.com/aavdS.jpg" alt="enter image description here"></p>
  
  <p>My code is here 
  <a href="http://jsfiddle.net/7AE7J/1/" rel="nofollow noreferrer">http://jsfiddle.net/7AE7J/1/</a>
  please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div  id="header"&gt;
       &lt;div id="buttons"&gt;
          &lt;a href="#" class="button_back"&gt;link 1&lt;/a&gt;
          &lt;a href="#" class="button_back"&gt;link 2&lt;/a&gt;
      &lt;/div&gt;
          &lt;h1&gt;Heading of the page&lt;/h1&gt;
      &lt;div id="logo"&gt;
          &lt;a href="#"&gt;
             &lt;img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" /&gt;
         &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {
       background:green;
       height:44px;
      width:100% }
  
   #buttons {
       float: left;
       margin-top: 7px;
       }
  
   #buttons a {
       display: block;
       font-size: 13px;
       font-weight: bold;
       height: 30px;
       text-decoration: none;
       color:blue;
      float:left}
  
   #buttons a.button_back {
       margin-left: 8px;
       padding-left:10px;
       padding-top: 8px;
      padding-right:15px }
  
   #header h1 {
       color: #EEEEEE;
       font-size: 21px;
       padding-top: 9px ;
       margin:0 auto}
  
   #logo {
       float: right;
      padding-top: 9px;
       }
  </code></pre>