Question

是否可以将浮动的div放在容器中，如果可以，如何？

例如，我有一个带有容器div的页面，其中包含许多可变大小（动态生成）的浮动（左）div。 div会溢出到下一行，但它们永远不会在容器div中居中，而是用左边的方式。它看起来像这样：

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

虽然我希望浮动的div在容器中居中，如下所示：

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

谢谢，

DLiKS

Answer 1

有可能。使用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="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

这是效果所需的最小CSS：

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

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

#inner > li {
    float: left;
}

说明：

仅从li { float: left; }规则开始。然后将这些浮点数包裹在left: 50%; relative position中，以便<ul>框的左边缘位于页面的水平中心，然后使用#outer中的规则正确调整它#inner的中心与页面对齐。

Answer 2

计算所需布局占用的屏幕空间宽度总量，然后使父级具有相同的宽度并应用margin：auto。

＆＃13;

-x + y + 2

＆＃13;

.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 = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

＆＃13;

Answer 3

使用CSS3，您还可以使用flexbox实现此目的：

HTML：

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS：

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

小提琴（有一些可视化样式）：https://jsfiddle.net/k5o37dff/4/

有关flexbox的更多信息：https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

浏览器支持：https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 4

刚入门

.container{
width:80% ;height:100px ; border: solid 3px goldenrod; display: flex; flex-flow: row wrap; 
float: right; position: relative; right: 10%; }

.white{width:50%;height:50% ; background-color: honeydew;}

.blue{ width:50%;height:50%; background-color: indigo;}

<!--display flex & flex-wrap properties & chess board -->


  <div class="container" >
    <div class="white"></div> <div class="blue"></div>
    <div class="blue"></div>  <div class="white"></div> 
    
  </div>

Answer 5

中心“div”元素的一个好方法是设置“margin：auto”，它将使它们居中。

如何将容器中的浮动中心放在中心位置

6 个答案: