Html 如何使浮动div居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8901209/
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
How to center floating divs?
提问by John Assymptoth
I want to center the three divs that appear in the mockup below (all have "float:left"). Is this possible?
我想将出现在下面模型中的三个 div 居中（都有“float:left”）。这可能吗？
I don't mind having wrapper-divs.
我不介意有包装器 div。
Text-align:center and display:inline-block won't work with the code I have.
Text-align:center 和 display:inline-block 不适用于我拥有的代码。
回答by animuson
If you want to center them, you can't float them. A better alternative would be to make them all display: inline-blockso you can still stylize them as a block element, and they'll still pay attention to your text-align: centeron the parent wrapper. This would appear to be a good solution for the limited example you've provided.
如果你想让它们居中，你不能浮动它们。更好的选择是将它们全部制作出来，display: inline-block这样您仍然可以将它们样式化为块元素，并且它们仍然会关注您text-align: center在父包装器上的内容。对于您提供的有限示例，这似乎是一个很好的解决方案。
In order to account for browser compatibility, you'd need to change them to <span>rather than <div>before adding the display: inline-blockon to them. This would be supported in everything IE7 and up, and all other modern browsers. IE6 would not be supported, but it's only widely used in China anymore.
为了考虑浏览器兼容性，您需要将它们更改为<span>而不是<div>在添加之前display: inline-block。这将在所有 IE7 及更高版本以及所有其他现代浏览器中得到支持。IE6 将不被支持，但它只在china广泛使用。
回答by calumbrodie
div#wrapper {
width:960px;
margin: 0 auto;
}
edit:
编辑：
Moved complete code from fiddle to answer as per suggestion
将完整的代码从小提琴移到根据建议回答
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
回答by andicandy
You can also use a list and get the same results:
您还可以使用列表并获得相同的结果：
CSS:
CSS：
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
HTML：
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
回答by Larsenal
Try this: http://jsfiddle.net/nvpXx/3/
试试这个：http: //jsfiddle.net/nvpXx/3/
You can wrap your floated divs with an inline-block element and center it within its parent.
您可以使用内联块元素包装浮动的 div，并将其居中放置在其父元素中。
HTML
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Potential Pitfall
潜在的陷阱
This doesn't work well if you have so many floated items that they wrap to a second line. At that point, the div.wrapexpands to 100% of its container and as a result everything is off-center.
如果您有太多的浮动项目以至于它们包装到第二行，这将无法正常工作。在这一点上，div.wrap扩展到其容器的 100%，结果一切都偏离了中心。
回答by WIWIWWIISpitFire
Try this one, keep it simple:
试试这个，保持简单：
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
This will make it responsive although it breaks on some point, it helps to create a media query for the max-width:
这将使其具有响应性，尽管它在某些时候会中断，但它有助于为最大宽度创建媒体查询：
<style>
@media screen and (max-width:520px){ ul li{float:none} }
</style>
回答by Milad Naseri
Floats, as the name suggests, are completely independent of their containers. So, you cannot center them according to a container, because they will know no container.
浮点数，顾名思义，完全独立于它们的容器。因此，您不能根据容器将它们居中，因为它们不知道容器。
回答by srijan
Hope this helps:
希望这可以帮助：
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
回答by user1146440
What I would do is add a container div for them.
我要做的是为他们添加一个容器 div。
Then add overflow:auto so that the container div wraps around the 3 divs and then set the container div in the center with margin:0 auto.
然后添加溢出：自动，以便容器 div 环绕 3 个 div，然后将容器 div 设置在中心，边距：0 自动。
