Question

我有这个问题，我想在一个标题内集中一个div，问题是：我有另外两个div（一个使用float左边，另一个使用float右边），见下文：

<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并设置宽度：每个为33％。

Answer 2

要解决之前的答案作为可能的解决方案，您确实可以将每个答案设置为33％，但为了防止缩放，请将整个事物包装在div中。 EG：

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

的CSS：

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

.left{
  float left;
  width:33%;
}

.center{
  float:left;
  width:34%;
}

.right{
  float:left;
  width:33%;
}

#wrapper{
  width:1000px;
}

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

2 个答案: