Question

所以我想要漂浮一些div的中心，或者我正在使用float: left，在看完其他答案之后我给了我这个样子http://i.imgur.com/wfHacch.png我发现我不能这样做，其中一个我提出的建议是使用margin: 0 auto;当我使用它时，根据这个图像http://i.imgur.com/xyixrdj.png

，所有内容都只是按照中心的一行排列

我试图强制浮动div以均匀的方式堆叠居中。在较低的屏幕尺寸中，这也会调整到线下的堆栈，

我最好这样做吗？

现在这是我的CSS

.container {
    overflow: hidden;
    width: 100%;
    height: 100%;

}
.item {
    float: left;

    max-width: 500px;


    width: 100%;
    padding: 10px;
    height: 100%;


}
button {
    width: 33%;
    height: 100%;
    padding: 20px;
    background: orange;
    border: 1;
    border-radius: 10px;
    border: 1px;
    border-radius: 02px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}

我的HTML

<div class="container orders">
<div class="item">
                <button class="ready">
                    /*content*/    

                </button>
            </div>
</div

Answer 1

您应该使用inline-block

div {
    display: inline-block
}

默认情况下，div为block个元素。

Answer 2

您可以使用flexbox：https://jsfiddle.net/BradChelly/m9d3jepz/

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.item {
  width: 30%;
  height: 100px;
  margin-bottom: 20px;
  border:1px solid red;
}

@media only screen and (max-width: 500px) {
    .item {
      width: 45%;
      }
}

@media only screen and (max-width: 300px) {
    .item {
      width: 100%;
      }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>   
</div>

Answer 3

我不知道你的代码是什么但是如果我是你，我会尝试将这些div包含在另一个div中，并带有display：inline-block和clearfix。然后给父文本对齐：中心。结束代码看起来应该是这样的：

＆＃13;

.parent{
  text-align: center;
  }
.parent .container{
  display: inline-block;
  width: 340px;
  zoom: 1;
  }
.parent .container:after{
  content: "";
  display: table;
  clear: both;
  }
.parent .container:before{
  content: "";
  display: table;
  }
.parent .container .element{
  display: block;
  float: left;
  width: 100px;
  bordeR: 1px solid #000000;
  height: 50px;
  margin: 5px
  }

＆＃13;

<div class="parent">
  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

＆＃13;

Answer 4

如果你想中心一个div所以你必须删除浮动左边你可以添加文本对齐中心我父div并在子div中添加显示内联块像这样

＆＃13;

.parent{
  width:100%;
  float:left;
  text-align:center;
  }
.child{
  width:100px;
  background:#f00;
  display:inline-block;
  }

＆＃13;

<div class="parent">
  <div class="child">Some text here</div>
  <div class="child">Some text here</div>
  <div class="child">Some text here</div>
  <div class="child">Some text here</div>   
</div>

＆＃13;

如何浮动中心但仍然保持左浮动的特性

4 个答案: