Html 在另一个 div 中居中浮动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1269245/
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 floating divs within another div
提问by Darren
I've searched other questions and, while this problem seems similar to a couple of others, nothing I've seen so far seems to address the issue that I'm having.
我搜索了其他问题，虽然这个问题似乎与其他几个问题相似，但到目前为止我所看到的似乎都没有解决我遇到的问题。
I have a div which contains a number of other divs, each of which is floated left. These divs each contain a photo and a caption. All I want is for the group of photos to be centered within the containing div.
我有一个 div，其中包含许多其他 div，每个 div 都向左浮动。这些 div 每个包含一张照片和一个标题。我想要的只是让这组照片在包含的 div 内居中。
As you can see from the code below, I've tried using both overflow:hiddenand margin:x autoon the parent divs, and I've also added a clear:both(as suggested in another topic) after the photos. Nothing seems to make a difference.
正如您从下面的代码中看到的，我尝试在父 div 上同时使用overflow:hidden和margin:x auto，并且还在clear:both照片后添加了一个（如另一个主题中所建议的）。似乎没有什么不同。
Thank you. I appreciate any suggestions.
谢谢你。我很感激任何建议。
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
回答by Sampson
First, remove the floatattribute on the inner divs. Then, put text-align: centeron the main outer div. And for the inner divs,
use display: inline-block. Might also be wise to give them explicit widths too.
首先，删除float内部divs上的属性。然后，穿上text-align: center主要的外衣div。对于内部divs，请使用display: inline-block. 给他们明确的宽度也可能是明智的。
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
回答by Danield
With Flexboxyou can easily horizontally (and vertically) center floated childreninside a div.
使用Flexbox，您可以轻松地在 div 内水平（和垂直）居中浮动子项。
So if you have simple markup like so:
因此，如果您有这样的简单标记：
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
with CSS:
使用 CSS：
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(This is the (expected - and undesirable) RESULT)
（这是（预期的和不受欢迎的）结果）
Now add the following rules to the wrapper:
现在将以下规则添加到包装器中：
display: flex;
justify-content: center; /* align horizontal */
and the floated children get aligned center (DEMO)
和浮动的孩子对齐中心（演示）
Just for fun, to get vertical alignment as well just add:
只是为了好玩，为了获得垂直对齐，只需添加：
align-items: center; /* align vertical */
DEMO
演示
回答by Kendolein
I accomplished the above using relative positioning and floating to the right.
我使用相对定位和向右浮动来完成上述操作。
HTML code:
HTML代码：
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
CSS：
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle: http://jsfiddle.net/MJ9yp/
JSFiddle：http: //jsfiddle.net/MJ9yp/
This will work in IE8 and up, but not earlier (surprise, surprise!)
这将适用于 IE8 及更高版本，但不会更早（惊喜，惊喜！）
I do not recall the source of this method unfortunately, so I cannot give credit to the original author. If anybody else knows, please post the link!
不幸的是，我不记得这种方法的来源，所以我不能相信原作者。如果有谁知道，请发链接！
回答by Salman A
The following solution does not use inline blocks. However, it requires two helper divs:
以下解决方案不使用内联块。但是，它需要两个辅助 div：
- The content is floated
- The inner helper is floated (it stretches as much as the content)
- The inner helper is pushed right 50% (its left aligns with center of outer helper)
- The content is pulled left 50% (its center aligns with left of inner helper)
- The outer helper is set to hide the overflow
- 内容是浮动的
- 内部助手是浮动的（它与内容一样伸展）
- 内部助手被向右推 50%（其左侧与外部助手的中心对齐）
- 内容向左拉 50%（其中心与内部助手的左侧对齐）
- 外部助手设置为隐藏溢出
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>回答by Abdulla Kaleem
display: inline-block;won't work in any of IE browsers. Here is what I used.
display: inline-block;不适用于任何 IE 浏览器。这是我使用的。
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
回答by Touhid Rahman
Solution:
解决方案：
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
回答by dimmech
In my case, I could not get the answer by @Sampson to work for me, at best I got a single column centered on the page. In the process however, I learned how the float actually works and created this solution. At it's core the fix is very simple but hard to find as evident by this thread which has had more than 146k views at the time of this post without mention.
在我的情况下，我无法通过@Sampson 得到答案来为我工作，充其量我只有一个以页面为中心的列。然而，在这个过程中，我了解了浮动的实际工作原理并创建了这个解决方案。从本质上讲，修复程序非常简单，但很难找到，正如该线程所证明的那样，该线程在本文发布时已超过 146,000 次查看，但没有提及。
All that is needed is to total the amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto. That's it!
所需要做的就是合计所需布局将占用的屏幕空间宽度，然后使父级具有相同的宽度并应用 margin:auto。就是这样！
The elements in the layout will dictate the width and height of the "outer" div. Take each "myFloat" or element's width or height + its borders + its margins and its paddings and add them all together. Then add the other elements together in the same fashion. This will give you the parent width. They can all be somewhat different sizes and you can do this with fewer or more elements.
布局中的元素将决定“外部”div 的宽度和高度。取每个“myFloat”或元素的宽度或高度 + 它的边框 + 它的边距和它的内边距并将它们加在一起。然后以相同的方式将其他元素添加在一起。这将为您提供父宽度。它们的大小都可能有所不同，您可以使用更少或更多的元素来做到这一点。
Ex.(each element has 2 sides so border, margin and padding get multiplied x2)
例如（每个元素有 2 个边，所以边框、边距和填充乘以 x2）
So an element that has a width of 10px, border 2px, margin 6px, padding 3px would look like this: 10 + 4 + 12 + 6 = 32
因此，宽度为 10px、边框为 2px、边距为 6px、内边距为 3px 的元素将如下所示：10 + 4 + 12 + 6 = 32
Then add all of your element's totaled widths together.
然后将所有元素的总宽度加在一起。
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
In this example the width for the "outer" div would be 112.
在此示例中，“外部”div 的宽度将为 112。
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>