在 2 个 div 之间的中间 div 中居中内容

Question

我有一个标题，它的左侧和右侧都有一个元素，中间有一个元素，其宽度填充了中间剩余的空间。我知道以 px 为单位的左右元素宽度。我需要剩余空间中心的中间元素的内容，无论它有多宽。

HTML

  <section class="header">
       <div class="left"></div>
       <div class="middle">
               <ul>
                  <li><button></button></li>
                  <li><button></button></li>
                  <li><button></button></li>
               </ul>
       </div>
       <button class="right"></button>  
  </section>

CSS：

.left {
    width:100px;
}

.middle {
    /*
     * This width is 100% of the space between left and right, 
     * content needs to be centered within it
     */
}

.right {
     width:100px;
}

Answer 1

我尝试了您在问题中提出的问题，并且得到了我认为正确的输出。

首先我添加了我稍微修改的代码

HTML

<section class="header">
    <div class="left"><button>hai</button></div>
       <div class="middle">
               <ul>
                  <li><button></button></li>
                  <li><button></button></li>
                  <li><button></button></li>
               </ul>
       </div>
       <button class="right">right</button>  
  </section>

CSS

.left{
width: 100px;
float: left;
position: absolute;
top: 30px;
left: 10px;
}

.header
{
    background:red;
}

.middle{
/*This width is 100% of the space between left and right, 
content needs to be centered within it*/
    position: relative;
left: 37%;
}

.right{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 100px;
}

我正在添加到 jsfiddle 的链接，在那里我实现了所需

http://jsfiddle.net/pMdL7/1/