将一个DIV在右浮动的DIV和左浮动的DIV之间居中对齐。

Question

将一个DIV在右浮动的DIV和左浮动的DIV之间居中对齐。

htmlcsscenter

63

我有一个页面，其中页眉由三个div组成-一个向左浮动，一个向右浮动，还有一个在它们之间。我想让中心的div居中，但遗憾的是，float: center不存在，我也不能只将其向左浮动并添加填充，因为这取决于窗口大小。

我是否忽略了某些简单的东西？或者我该如何做到这一点？

更新：
此外，如果这看起来更好，我希望找到一种在

之间空间内使中间的div居中的方法。

- Mala

1

你能发布一下你当前的CSS和HTML吗？这将有助于调试过程。 - xil3

这更多是一种通用的东西 - 如何将一个元素浮动到页面的左侧，一个元素浮动到页面的右侧，并将一个元素居中放置在同一行上。 - Mala

7个回答

42

事实上，重要的部分是居中的 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

- Samuel Meacham

2

谢谢您的建议！不过这会将中间的 div 相对于页面居中，而不是相对于其“邻居”居中。 - Mala

6

通常情况下，你可以使用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;
}

- Leo

良好但不能考虑中间元素的自定义宽度。 - tblev

4

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

查看这里：http://jsfiddle.net/calvintennant/wjjeR/

- user1357678

问题在于这仅适用于文本，因此如果例如想要在两个浮动的 div 之间居中一张图片，则不适用。 - TheEnvironmentalist

从这里看起来似乎工作得很好：http://jsfiddle.net/calvintennant/dBz5d/您要居中的内容需要设置为 display: inline 或 display: inline-block。 - user1357678

你能解释一下为什么吗？比如为什么必须把居中放在最后面？我不知道该如何查找这个问题的原因。我只是想知道以备将来参考。 - carinlynchin

2

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

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

中间的div将会在两个浮动元素之间。如果你想要在那个居中的div和两个浮动元素之间创建一个间隙，则在浮动元素上使用margin，而不是在中心div上使用margin。

由于“zoom”的存在，CSS将无法验证，但该布局在IE 5.5和6中可以正常工作。

请注意，源代码顺序在这里很重要：两个浮动元素必须先出现，然后才是您的“居中”div。

- Thierry Koblentz

0

在某些情况下，由于无法将中间的 div 移动到右浮动的 div 之后而受到限制。在这种情况下，请按照以下说明进行操作：

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

希望您明白了。

- Tengiz

-2

一个简单的解决方案，而不必改变div的顺序（有时我们无法这样做）可以是将中心div绝对定位如下：

.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;
}

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

https://jsfiddle.net/Helioz/nj548y0g/

- MVP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ionuț Staicu · Accepted Answer

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

左浮动 | 右浮动 | 居中

现在，关于边距：通常你可以只使用margin:0 auto，对吧？问题是，现在你知道了边距的值：浮动的div！所以你只需要使用： margin:0 right-floated-width 0 left-floated-width 那应该就行了。

多年后的修改

与此同时，新玩具出现了：flexbox。支持相当好（即如果您不需要支持低于IE 10），而且易于使用远远超过浮动。

您可以在这里看到一个非常好的flexbox指南。您需要的示例就在这里。