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

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>

SCSS：

#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. Prevent flex items from expanding full height (a default setting)。 flex-start值将对齐容器的十字轴开头的每个项目。在这种情况下，这是垂直（Y）轴的顶部。如果您希望项目垂直居中，请改用center值。默认值为stretch。
3. Align flex items horizontally in the container。您也可以尝试justify-content: space-around。请注意，如果左右元素（后向/前向链接）的宽度相等，则此方法仅将中间项置于容器中心。如果链接长度不同，则需要使用其他方法（请参阅＃71-78 here框）。

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

注意：

1. Use an invisible pseudo-element to create equal balance on the opposite end of the container.这实际上是从第一个示例中删除的DOM元素的替代品。它使中间项目居中。

jsFiddle

浏览器支持

所有主流浏览器except IE 8 & 9都支持Flexbox。

最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。

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

this answer中的更多详情。

Answer 2

从您的结构中，您可以使用flex（IE11）和justify-content，然后隐藏.clearfix并在第四个位置时移除它：

3（4包括clearfix）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

只涉及2（3） 相同的CSS

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

适用于较旧的浏览器。

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

与3（4）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

和2（3） 涉及相同的CSS ：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

让我小提琴＆＃39;这件事暂时回到你身边 - 我昨天刚刚做了类似的工作。

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

正如评论者所说 - 这将有助于ALOT看到你想看到的最终结果。根据我对截图的解释（质量差和非描述性的FYI），我觉得您希望此header在移动设备上维护左/后按钮和徽标。但是，在桌面/笔记本电脑视口大小上，您需要一个前进按钮来显示自己。

如果这不正确，请验证！

编辑2：

离开上面这张海报的JSFiddle，我想出了一个更好的＆＃34;＆＃34;将元素堆叠在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;
  }

请参阅下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;