blocks|key|1264245|text|display:+inline-block;在任何IE浏览器中都不起作用。这是我使用的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1264246|//+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;
}|code-block|syntax|javascript|1264247|entityMap^0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><code>display: inline-block;</code> won't work in any of IE browsers. Here is what I used.</p>

<pre><code>// 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;
}
</code></pre>


blocks|key|1264364|text|我使用相对定位和向右浮动来完成上面的操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264365|HTML代码：|1264366|<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>|code-block|syntax|javascript|1264367|CSS：|1264368|.outer-div+{+position:+relative;+float:+right;+right:+50%25;+}
.inner-div+{+position:+relative;+float:+right;+right:+-50%25;+}
.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;+}|1264369|JSFiddle：http://jsfiddle.net/MJ9yp/|offset|length|1264370|这将在IE8和更高版本中工作，但不会更早(令人惊讶，令人惊讶！)|1264371|不幸的是，我不记得这种方法的来源了，所以我不能将功劳归功于原始作者。如果其他人知道，请贴上链接！|1264372|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/MJ9yp/^0|0|0|0|0|0|9|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>I accomplished the above using relative positioning and floating to the right.</p>

<p>HTML code:</p>

<pre><code>&lt;div class="clearfix"&gt;                          
    &lt;div class="outer-div"&gt;
        &lt;div class="inner-div"&gt;
            &lt;div class="floating-div"&gt;Float 1&lt;/div&gt;
            &lt;div class="floating-div"&gt;Float 2&lt;/div&gt;
            &lt;div class="floating-div"&gt;Float 3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.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; }
</code></pre>

<p>JSFiddle: <a href="http://jsfiddle.net/MJ9yp/">http://jsfiddle.net/MJ9yp/</a></p>

<p>This will work in IE8 and up, but not earlier (surprise, surprise!)</p>

<p>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!</p>


blocks|key|1264498|text|在我的例子中，我不能通过@Sampson得到答案为我工作，我最多得到一个页面居中的单列。然而，在这个过程中，我了解了浮动的实际工作原理，并创建了这个解决方案。在它的核心，修复是非常简单的，但很难找到，从这个帖子可以明显看出，这个帖子在没有提到的情况下已经有超过146k的浏览量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264499|所有需要做的就是将所需布局占用的屏幕空间宽度合计，然后使父布局具有相同的宽度，并应用make+:auto。就这样!|1264500|布局中的元素将决定“外部”div的宽度和高度。取每个"myFloat“或元素的宽度或高度%2B它的边框%2B它的边距和填充，并把它们加在一起。然后以相同的方式将其他元素添加到一起。这将为您提供父级宽度。它们都可以有一些不同的大小，你可以用更少或更多的元素来做到这一点。|1264501|例如(每个元素都有两条边，因此边框、边距和填充都会乘以x2)|1264502|因此，宽度为10px、边框为2px、边距为6px、填充为3px的元素将如下所示:+10+%2B4%2B+12+%2B6=+32|1264503|然后将所有元素的总宽度相加在一起。|1264504|Element+1+=+32
Element+2+=+24
Element+3+=+32
Element+4+=+24|code-block|syntax|javascript|1264505|在本例中，"outer“div的宽度为112。|1264506|​|1264507|.outer+{
++/*+floats+%2B+margins+%2B+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;
}|1264508|<div+class="outer">
++<div+class="myFloat">Float+1</div>
++<div+class="myFloat">Float+2</div>
++<div+class="myFloat">Float+3</div>
</div>|1264509|1264510|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|17|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|18|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|19|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|W|3|X|5|N|7|1B|8|@]|9|@]|A|$O|P]]|$1|Y|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

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

<p>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!</p>

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

<p>Ex.(each element has 2 sides so border, margin and padding get multiplied x2)</p>

<p>So an element that has a width of 10px, border 2px, margin 6px, padding 3px would look like this:
10 + 4 + 12 + 6 = 32</p>

<p>Then add all of your element's totaled widths together.</p>

<pre><code>Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
</code></pre>

<p>In this example the width for the "outer" div would be 112.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
  &lt;div class="myFloat"&gt;Float 1&lt;/div&gt;
  &lt;div class="myFloat"&gt;Float 2&lt;/div&gt;
  &lt;div class="myFloat"&gt;Float 3&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


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

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

<p>As you can see from the code below, I've tried using both <code>overflow:hidden</code> and <code>margin:x auto</code> on the parent divs, and I've also added a <code>clear:both</code> (as suggested in another topic) after the photos. Nothing seems to make a difference.</p>

<p>Thank you. I appreciate any suggestions.</p>

<pre><code>&lt;div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;"&gt;
    &lt;h4&gt;Section Header&lt;/h4&gt;

    &lt;div style="margin: 2em auto;"&gt;

        &lt;div style="float: left; margin: auto 1.5em;"&gt;
            &lt;img src="photo1.jpg" /&gt;&lt;br /&gt;
             Photo Caption
        &lt;/div&gt;
        &lt;div style="float: left; margin: auto 1.5em;"&gt;
            &lt;img src="photo2.jpg" /&gt;&lt;br /&gt;
             Photo Caption
        &lt;/div&gt;
        &lt;div style="float: left; margin: auto 1.5em;"&gt;
            &lt;img src="photo3.jpg" /&gt;&lt;br /&gt;
             Photo Caption
        &lt;/div&gt;

        &lt;div style="clear: both; height: 0; overflow: hidden;"&gt; &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;
</code></pre>


Centering floating divs within another div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经搜索了其他问题，虽然这个问题似乎与其他几个问题相似，但到目前为止，我所看到的似乎没有解决我所遇到的问题。我有一个包含许多其他div的div，每个div都是向左浮动的。这些div每个都包含一张照片和一个标题。我只想让这组照片在包含的div中居中。从下面的代码中可以看到，我尝试在父div上同时使用overflow:h...

问使浮动div在另一个div中居中
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使浮动div在另一个div中居中EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使浮动div在另一个div中居中
EN