css - 使用 display-inline 集中一个 div 并受 float 影响

Question

我遇到了这个问题，我想在标题中集中一个 div，问题是:我有 2 个另一个 div(一个使用左浮动，另一个使用右浮动)，见下文:

<header>
  <div class="left">Hello World App Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

我尝试使用这个 css:

header{
  width: 100%;
  background-color:black;
  margin-top:50px;
  text-align:center;
}

.left{
  float: left;
}

.center{
  display: inline-block;
}

.right{
  float: right;
}

但这并没有集中我的中心 div(几乎，但不是因为它受到另外 2 个 div 的影响)，这里我有什么选择来集中这个 div？

查看我的 plnkr.co

Answer 1

尝试将所有 div 向左浮动并为每个设置 width:33%。