如何在容器中居中浮动Div [英] How to Center Floated Divs in a Container

问题描述

是否有可能将浮动的div放在容器中，如果是这样？

例如，我有一个容器div包含很多变量生成）浮动（左）divs。这些div很常见地溢出到下一行，但它们永远不会集中在容器div中，而是与左边一致。它看起来像这样：

  --------------------- ------- 
  -   -  
  -  +++ +++++ ++++ ++  -  
  -  +++ +++++ ++++ ++  -  
  -   -  
  -  ++ ++++++ +++ +  -  
  -  ++ ++++++ +++ +  -  
  -  -  
 ---------------------------- 
  

鉴于我想浮动的div居中在这样的容器中：

  ---------------------------- 
  -   -  
  -  +++ +++++ +++ + ++  -  
  -  +++ +++++ ++++ ++  -  
  -   -  
  -  ++ ++++++ +++ +  -  
  -  ++ ++++++ +++ +  -  
  -   -  
 ------------------------ ---- 
  

谢谢，

DLiKS

解决方案

这是可能的。使用 http://www.pmob.co.uk/pob/centred-float .htm 和 http://css-discuss.incutio.com/wiki/Centering_Block_Element 作为源文件。

下面是使用下面的HTML和CSS展示概念的小提琴： https://jsfiddle.net/t9qw8m5x/

  < div id =outer> 
< ul id =inner> 
< li>< a href =＃>按钮1< / a>< / li> 
< li>< a href =＃>带有长文字的按钮2< / a>< / li> 
< li>< a href =＃>按钮3< / a>< / li> 
< / ul> 
< / div> 
  

这是效果所需的最低CSS：

  #outer {
 float：right; 
职位：亲属; 
剩下：-50％; 
} 
 
 #inner {
 position：relative; 
剩下：50％; 
} 
 
 #inner> li {
 float：left; 
 
 $ / code> 

解释：



只需 li {float：left; } 规则。然后将这些花车包装在左侧：50％;相对位置，因此< ul> 的框的左边缘位于页面的水平中心，然后使用规则 #outer 以正确调整它，使 #inner 的中心与页面对齐。

Is it possible to center floated divs in a container and if so how?

For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Whereas I would like the floated divs centered in the container like this:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Thanks,

DLiKS

解决方案

It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.

Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

This is the minimum CSS needed for the effect:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explanation:

Start off with just the li { float: left; } rule. Then wrap those floats in the left: 50%; relative position, so the left edge of the <ul>'s box is in the horizontal centre of the page, then use the rules in #outer to correctly adjust it so the centre of #inner is aligned with the page.

这篇关于如何在容器中居中浮动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！