Question

我有一个页面，其中一个标题由三个div组成 - 一个浮动到左边，一个浮动到右边，另一个放在它们之间。我希望中心div能够居中，但遗憾的是float: center不存在，我不能将它浮动到左边并添加填充，因为它必须根据窗口大小进行更改。

我有什么简单的东西可以忽略吗？或者我将如何做这样的事情？

更新
另外，我想找到一种方法，将中间div 置于div之间的空间，以防看起来更好。

Answer 1

如果你有两个浮动的div，那么你知道边距。问题是float:right div应放在中间div之前。所以基本上你会有：

左浮动|右浮动|中心

现在，关于边距：通常你可以使用margin:0 auto，对吧？问题是，现在您知道边距的值：浮动的div！所以你只需要使用：

margin:0 right-floated-width 0 left-floated-width

这应该有效。

多年后编辑

与此同时，城里还有一个新玩具：flexbox。支持是fairly good（即如果你不需要支持低于IE 10），那么易用性就超过了花车。

您可以看到非常好的弹性箱指南here。您需要的示例是here。

Answer 2

事实上，重要的部分是中心div在标记中的左右div之后。看看这个例子，它在居中的div上使用margin-left: auto和margin-right: auto，这会使它居中。

<html> <head> <style type="text/css"> #left { float: left; border: solid 1px red; } #mid { margin-left: auto; margin-right: auto; border: solid 1px red; } #right { float: right; border: solid 1px red; } </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> <div id="mid"> mid </div> </body> </html>

这是一个要测试的JS Bin：http://jsbin.com/agewes/1/edit

Answer 3

通常你可以使用flexbox代替浮点数：

https://jsfiddle.net/h0zaf4Lp/

HTML：

<div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

CSS：

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}

Answer 4

具有居中内容的元素需要在两个浮动元素之后指定。之后，只需将中间元素设置为text-align: center即可。居中元素中的文本将挤入浮动之间。

见这里： http://jsfiddle.net/calvintennant/wjjeR/

Answer 5

试试这个（确保使用更好的类名）：

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

中心div适合两个花车。
如果你想在那个居中的div和两个浮点之间创建一个装订线，那么在浮点上使用边距，而不是在中心div上。

由于“缩放”，CSS不会验证，但该布局将在IE 5.5和6中有效。

请注意，源顺序在这里很重要：两个浮点数必须先出现，然后是“居中”的div。

Answer 6

在某些情况下，您有一个限制，并且无法通过在右浮动div之后移动中间div来更改页面标记。在这种情况下，请按照以下说明操作：

容器：position: relative
对于中间div：position: absolute; left: [containerWidth - middle-width / 2]

我希望你明白了。

Answer 7

一个简单的解决方案，无需更改div的顺序（有时我们不能这样做）可能是中心div的绝对定位，如下所示：

＆＃13;

.container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

＆＃13;

＆＃13; https://jsfiddle.net/Helioz/nj548y0g/

将一个div放在一个向右浮动的和一个向左浮动的div之间

7 个答案:

多年后编辑