Question

一旦空间稀疏，浮动左侧会导致元素被推送到下一行。如何将新推出的元素置于其剩余的空间中心，使其不会位于左侧，而是位于中心。

让我们以此代码为例http://codepen.io/anon/pen/QdPVwe。绿色部分被推到下一行，但它保持对齐。一旦按下它，如何将其置于当前窗口宽度中？

<div>
<section></section>
<section></section>
<section></section>
</div>  

section {
  width: 33%;
  height:300px;
  background-color:red;
  float: left;
  margin-right: 1%;

}

section:last-child {
  background-color:green;
  margin-right: 0%;
}
div{
  width:78%;
  margin:0 auto;
}

Answer 1

不确定是否需要浮动框，但您可以将display:inline-block;应用于子项，将text-align:center;应用于父项。

section {
  width: 300.33px;
  height:300px;
  background-color:red;
  display:inline-block;
}

section:last-child {
  background-color:green;
  margin-right: 0%;
}
div{
  width:78%;
  margin:0 auto;
  text-align:center;
}

<div>
<section></section><section></section><section></section>
</div>

Answer 2

而不是使用float:left;使用display:inline-block;，然后将text-align:center;添加到父div。

＆＃13;

section {
  width: 300.33px;
  height:300px;
  background-color:red;
  display:inline-block;
  margin-right: 1%;
}

section:last-child {
  background-color:green;
  margin-right: 0%;
}
div{
  width:78%;
  margin:0 auto;
  text-align:center;
}

＆＃13;

<div>
<section></section>
<section></section>
<section></section>
</div>

＆＃13;

Answer 3

为此，您可能需要重新考虑不同的策略。 Flex起初有点吓人但非常有用和强大。

在包装器上，您可以执行display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;。这非常好。

这是codepen示例： http://codepen.io/sequential/pen/LxvJrr

这是学习flexbox时的一篇很棒的文章。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

这是使用flexbox的解决方案。让您想要居中的元素的父级flex-grow占用剩余的可用空间，然后使用justify-content: center;将其置于该空间的中心位置。

＆＃13;

.outer {
  width: 78%;
  margin: auto;
}
section {
  width: 300.33px;
  height:300px;
  background-color:red;
  margin-right: 1%;
}
.center section {
  background-color:green;
  margin-right: 0%;
}
.flex {
  display: flex;
}
.center {
  flex-grow: 1;
  justify-content: center;
}

＆＃13;

<div class="flex outer">
  <div class="flex">
    <section></section>
    <section></section>
  </div>
  <div class="flex center">
    <section></section>
  </div>
</div>

＆＃13;

被推入的中心元素：浮动：左

4 个答案: