被推动的中心元素浮动：左答案

【问题标题】：center element that gets pushed whit float:left被推动的中心元素浮动：左
【发布时间】：2017-02-17 06:19:49
【问题描述】：

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

让我们以这个代码为例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;
}

【问题讨论】：

标签： html css

【解决方案1】：

为此，您可能需要重新考虑不同的策略。 Flex 一开始有点吓人，但非常有用且功能强大。

在包装上你可以做display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;。结果非常好。

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

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

【讨论】：

@sanjihan 对我来说也是如此，因为 flex 属性名称并不直观......就像 flex 到底是什么，但它绝对有用。

【解决方案2】：

不确定是否需要浮动框，但您可以将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>

【讨论】：

【解决方案3】：

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

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;
}

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

【讨论】：

【解决方案4】：

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

.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;
}

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

【讨论】：