对齐容器内的三个元素（左/中/右）

Question

我正在尝试创建一个带有三个内部内联元素的全角横幅。反向链接、徽标和正向链接。

我还想使用相同的代码创建一个带有两个内部内联元素的全角横幅。左后链接和中央徽标。

到目前为止我所拥有的是：

超文本标记语言

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

社会保障体系：

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid red;
    margin: 0 auto !important;
    display: inline-block;
    width: 100px;
  }

} // header-blue

我正在寻找一种得到广泛支持的解决方案，因此我不确定该规则是否适用？

结果是这样的：FIDDLE

编辑： 完成后的最终正确设计

免责声明： 请理解，虽然这可能被视为“重复”的帖子，但经过几个小时的在线研究和反复试验后，我仍然没有取得进一步的进展。因此，我想寻求针对这个问题的独特帮助，并在此过程中学习。

Answer 1

您可以使用CSS flexbox构建布局。

为了清晰和简洁，我从原始代码中删除了一些非必要的装饰样式。我还使用了编译后的 CSS，以方便那些不使用预处理器的人。

布局1：[左][中][右]

#header-wrap {
  display: flex;                   /* 1 */
  align-items: flex-start;         /* 2 */
  justify-content: space-between;  /* 3 */
  text-align: center;
  padding: 1rem 0;
}

#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }

<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
    <div class="header-right">
      <p>3</p>
      <p>3</p>
    </div>
  </div>
</section>

笔记：

1. 建立弹性容器。
2. 防止弹性项目扩展整个高度（默认设置）。该值将在容器横轴flex-start的起点处对齐每个项目。在本例中，这是垂直 (Y) 轴的顶部。如果您希望项目垂直居中，请使用该值。默认值为。centerstretch
3. 在容器中水平对齐弹性项目。你也可以尝试一下justify-content: space-around。请注意，如果左右元素（后退/前进链接）宽度相等，则此方法只会将容器中的中间项居中。如果链接的长度不同，您将需要使用另一种方法（请参阅此处的框#71-78 ）。

布局2：[左][中]

#header-wrap::after {               /* 4 */
    content: "";
    width: 100px;
}
#header-wrap {
    display: flex;                  /* 1 */
    align-items: flex-start;        /* 2 */
    justify-content: space-between; /* 3 */
    text-align: center;
    padding: 1rem 0; 
}
#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }

<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
  </div>
</section>

笔记：

4. 使用不可见的伪元素在容器的另一端创建相等的平衡。这本质上是对第一个示例中删除的 DOM 元素的替换。它使中间的项目保持居中。

jsFiddle

浏览器支持

除 IE 8 和 9 之外，所有主要浏览器都支持 Flexbox 。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。

要快速添加所需的所有前缀，请使用Autoprefixer。

更多详细信息请参阅此答案。