Html 将一个 div 居中在一个向右浮动的和一个向左浮动的 div 之间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3172738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
centering a div between one that's floated right and one that's floated left
提问by Mala
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: centerdoesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
我有一个页面，其中的标题由三个 div 组成 - 一个浮动到左侧，一个浮动到右侧，一个位于它们之间。我希望中央 div 居中，但遗憾的float: center是它不存在，我不能将它浮动到左侧并添加填充，因为它必须根据窗口大小进行更改。
Is there something simple I'm overlooking? Or how would I do such a thing?
我忽略了一些简单的东西吗？或者我会怎么做这样的事情？
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divsin case that looks better.
更新：
此外，我想找到一种将中间 div 居中放置在 div 之间的空间中的方法，以防看起来更好。
回答by Ionu? Staicu
If you have two floated divs, then you know the margins. The problem is that the float:rightdiv should be put before the middle div. So basically you will have:
如果您有两个浮动的 div，那么您就知道边距。问题是float:rightdiv应该放在中间div之前。所以基本上你会有：
left-floated | right-floated | centered
左浮动 | 右浮动 | 居中
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
现在，关于边距：通常你可以使用margin:0 auto，对吗？问题是现在您知道边距的值：浮动 div！所以你只需要使用：
margin:0 right-floated-width 0 left-floated-width
margin:0 right-floated-width 0 left-floated-width
That should work.
那应该工作。
Years later edit
多年后编辑
Meanwhile, a new toy is in town: flexbox. The support is fairly good(i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
与此同时，一个新玩具在城里：flexbox。支持相当好（即，如果您不需要支持低于 IE 10 的版本）并且易用性远远超过浮动。
You can see a very good flexbox guide here. The example you need is right here.
回答by Samuel Meacham
Indeed, the important part is that the centered div come afterthe left and right divs in the markup. Check out this example, it uses margin-left: autoand margin-right: autoon the centered div, which causes it to be centered.
事实上，重要的部分是居中的 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>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
这是要测试的 JS Bin：http: //jsbin.com/agewes/1/edit
回答by Leo
Usually you can use flexbox instead of floats:
通常你可以使用 flexbox 代替浮动：
https://jsfiddle.net/h0zaf4Lp/
https://jsfiddle.net/h0zaf4Lp/
HTML:
HTML：
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
CSS：
.container {
display: flex;
}
.center {
flex-grow: 1;
}
回答by calvintennant
The element with the centered content needs to be specified afterboth floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
需要在两个浮动元素之后指定具有居中内容的元素。之后，只需将中间元素设置为text-align: center. 居中元素中的文本将挤在浮动之间。
See here: http://jsfiddle.net/calvintennant/wjjeR/
回答by Thierry Koblentz
Try this (make sure to use better class names):
试试这个（确保使用更好的类名）：
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
中心 div 将适合两个浮点数之间。
如果要在居中的 div 和两个浮点之间创建一个装订线，请在浮点上使用边距，而不是在中心 div 上。
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
由于“缩放”，CSS 不会验证，但该布局将在 IE 5.5 和 6 中工作。
Note that source order is important here: the two floats must come first, then your "centered" div.
请注意，源顺序在这里很重要：两个浮点数必须先出现，然后是“居中”的 div。
回答by Tengiz
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
在某些情况下，您有一个限制，无法通过在右侧浮动的 div 之后移动中间的 div 来更改页面标记。在这种情况下，请按照以下说明操作：
- For container:
position: relative - For middle div:
position: absolute; left: [containerWidth - middle-width / 2]
- 对于容器：
position: relative - 对于中间 div：
position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
我希望你有这个想法。
回答by MVP
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
一个无需更改 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>