css - 如何在不为其父 div 赋予宽度的情况下始终将元素对齐在 div 中？

Question

我试图在一个 div 中对齐一个元素中心，我没有给父 div 任何宽度，因为它会根据屏幕尺寸展开，div 中总共有 3 个元素:

1. 按钮
2. 标题
3. 标志

每当屏幕尺寸改变时，按钮将始终左对齐， Logo 将始终右对齐，标题将始终居中对齐

我的代码在这里 http://jsfiddle.net/7AE7J/1/ 请让我知道我哪里出错了，我应该申请什么 css 来让元素(标题)始终对齐中心。

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

您可以为此使用inline-block:

#header {
  text-align: center;
}

#header h1 {
  display: inline-block;
}