Question

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 :

1. Buttons
2. Heading
3. Logo

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

My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.

HTML

<div  id="header">
     <div id="buttons">
        <a href="#" class="button_back">link 1</a>
        <a href="#" class="button_back">link 2</a>
    </div>
        <h1>Heading of the page</h1>
    <div id="logo">
        <a href="#">
           <img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
       </a>
    </div>
</div>

CSS

#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;
     }

Answer 1

You can use inline-block for this:

#header {
  text-align: center;
}

#header h1 {
  display: inline-block;
}