在另一个 div 中将浮动 div 居中

我搜索了其他问题，虽然这个问题与其他几个问题相似，但到目前为止，我所看到的似乎都没有解决我所面临的问题。

我有一个 div，它包含许多其他 div，每个 div 都是左浮动的。每个 div 包含一张照片和一个说明。我所需要的只是将这组照片放在包含 div 的中心。

从下面的代码中可以看到，我已经尝试在父 div 上同时使用 overflow:hidden和 margin:x auto，并且在照片之后添加了 clear:both(如另一个主题中所建议的)。似乎没有什么不同。

谢谢，谢谢你的建议。

<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>
221203 次浏览
小开
最佳答案

首先，删除内部 div上的 float属性。然后，把 text-align: center放在主外 div上。至于内侧的 div, 使用 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>
小开

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;
}
小开

解决方案:

<!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>
小开

我完成了上述使用相对定位和浮动的权利。

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:

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

http://jsfiddle.net/MJ9yp/

这将工作在 IE8和以上，但不会更早(惊喜，惊喜!)

不幸的是，我不记得这个方法的来源，所以我不能把功劳归于原作者。如果其他人知道，请发布链接！

小开

使用 Flexbox，您可以很容易地在一个 div 中水平(和垂直)居中于 流浪儿童。

因此，如果您有这样的简单标记:

<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

使用 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;
}

(这是(预期的和不希望的) 结果)

现在向包装器添加以下规则:

display: flex;
justify-content: center; /* align horizontal */

浮子取中心对齐(译自: 美国《科学》杂志网站(http://jsfiddle.net/danield770/9DBCv/2/”> DEMO))

只是为了好玩，要获得垂直对齐也只需添加:

align-items: center; /* align vertical */

演示

小开

下面的解决方案不使用内联块。但是，它需要两个助手 div:

  1. 内容是浮动的
  2. 内部助手是浮动的(它和内容一样伸展)
  3. 内部助手被向右推50% (它的左边与外部助手的中心对齐)
  4. 将内容向左拉50% (其中心与内部助手的左对齐)
  5. 外部帮助器被设置为隐藏溢出

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

小开

就我而言，我无法得到@Sampson 给我的答案，最多只能得到一个以页面为中心的专栏。然而，在这个过程中，我了解了 float 实际上是如何工作的，并创建了这个解决方案。在它的核心的修复是非常简单的，但很难找到明显的这个线程，有超过146k 的浏览量时，这篇文章没有提到。

所有需要的是总数的屏幕空间宽度，所需的布局将占用，然后使父宽度相同，并应用边距: 自动。就是这样！

布局中的元素将指定“外部”div 的宽度和高度。将每个“ myFloat”或元素的宽度或高度 + 其边框 + 其边距和填充，并将它们全部相加。然后以相同的方式将其他元素添加到一起。这将给出父宽度。它们的大小可以有所不同，您可以使用更少或更多的元素来实现这一点。

例如(每个元素有两条边，所以边框、边距和填充被乘以 x2)

所以一个宽度为10px，边框为2px，边距为6px，空白为3px 的元素看起来是这样的: 10 + 4 + 12 + 6 = 32

然后将所有元素的总宽度相加。

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

在本例中，“外部”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>


提交答案