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

Question

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

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

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

HTML

 <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 项目扩展全高（默认设置） 。 flex-start值将在容器的交叉轴的起点对齐每个项目。 在这种情况下，这是垂直 (Y) 轴的顶部。 如果您希望项目垂直居中，请改用center值。 默认值为stretch 。
3. 在容器中水平对齐 flex 项目。 您也可以尝试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 元素的替代。 它使中间项目居中。

---

js小提琴

---

浏览器支持

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

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

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

此答案中的更多详细信息。

Answer 2

从您的结构中，您可以使用flex (IE11) 和justify-content ，然后隐藏.clearfix并在第四个位置时将其删除：

3 个（4 个，包括 clearfix）

 #header-wrap { display: flex; justify-content: space-between; } #header-wrap > div { border: solid; width: 100px; margin:0 0 auto;/* remove if you want each boxes same height */ } .clearfix:nth-child(4) { display: none; } .clearfix { opacity: 0; }

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

当只涉及2 (3) 个相同的 CSS 时

 #header-wrap { display: flex; justify-content: space-between; } #header-wrap > div { border: solid; width: 100px; margin:0 0 auto;/* remove if you want each boxes same height */ } .clearfix:nth-child(4) { display: none; } .clearfix { opacity: 0; }

 <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="clearfix"></div> </div> </section>

---

对于较旧的浏览器。

对于您的结构，您可以使用text-align 、 :after和选择器+ ：

与 3 (4)

 #header-wrap { text-align: justify; } #header-wrap:after { content: ''; display: inline-block; width: 99%; } #header-wrap > div { display: inline-block; vertical-align: top; border: solid; width: 100px; } #header-wrap > div + div + div +.clearfix { display: none; } .clearfix { opacity: 0; }

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

和 2(3) 个相同的 CSS 涉及：

 #header-wrap { text-align: justify; } #header-wrap:after { content: ''; display: inline-block; width: 99%; } #header-wrap > div { display: inline-block; vertical-align: top; border: solid; width: 100px; } #header-wrap > div + div + div +.clearfix { display: none; } .clearfix { opacity: 0; }

 <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="clearfix"></div> </div> </section>

Answer 3

得到广泛支持 - 我的直接回答是使用display: table;

让我“摆弄”一下，然后再回复您——我昨天只是在做类似的事情。

编辑 1：乍一看，我建议使用类而不是 ID。 这涉及一个更广泛的主题（CSS 特异性），但在您职业生涯的早期考虑非常有用。 话虽如此，我正在为您制定解决方案，因为我认为我知道您想要什么。

正如评论者所提到的 - 看到你想要看到的最终结果会很有帮助。 根据我对您的屏幕截图的解释（质量差和非描述性仅供参考），我觉得您希望此header保留移动设备上的左/后按钮和徽标。 但是，在台式机/笔记本电脑视口大小上，您需要一个前进按钮来显示自己。

如果不正确，请确认！

编辑2：

离开上面海报的 JSFiddle，我想出了一个“更好”的解决方案，将元素堆叠在header ，而不是超出它存在的“容器”： https : //jsfiddle.net/f815aa6y/ 1/

仍在研究正确的解决方案以使其在中间垂直对齐:)

Answer 4

考虑以不同方式定位左右元素。

https://jsfiddle.net/5gxLvp8a/4/

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    position: relative;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    left: 25px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    right: 25px;
  }

请参阅下面的代码片段：

 html, html a { font-size: 10px; } #header-blue { width: 100%; margin-bottom: 50px; height: auto; background-color: #3498DB; color: #fff; } #header-blue #header-wrap { text-align: center; border: 1px solid green; margin: 0 auto; padding: 1rem 2.5rem; position: relative; } #header-blue #header-wrap div { display: inline-block; vertical-align: middle; } #header-blue .header-left { float: left; border: 1px solid red; width: 100px; position: absolute; left: 25px; } #header-blue .header-right { float: right; border: 1px solid red; width: 100px; position: absolute; right: 25px; } #header-blue .header-center { border: 1px solid red; margin: 0 auto !important; display: inline-block; width: 100px; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }

 <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> <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="clearfix"></div> </div> </section>