对齐容器内的三个元素（左/中/右） [英] Aligning three elements (left/center/right) inside a container

查看：160
本文介绍了对齐容器内的三个元素（左/中/右）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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





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





到目前为止，我是：



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



寻找一个得到广泛支持的解决方案，因此我不确定该规则是否会折腾出来。



结果是：



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



免责声明： 请理解，虽然这可能被视为一个重复的帖子，经过公平的几个小时的在线研究和试验和错误，我仍然没有进一步进展。

解决方案

您可以请使用 CSS flexbox 。



为了清楚和简洁，我从原始代码中删除了几个非必要的装饰风格。我也使用编译的CSS，为那些不使用预处理器的人的利益。



布局1：[left] [center] [right] 



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



/ p>


  1. 建立flex容器。

  2. 防止弹出项展开全高（默认设置）。 flex-start 值将在容器的横轴开头对齐每个项目。在这种情况下，这是垂直（Y）轴的顶部。如果您希望项目垂直居中，请改用 center 值。默认值为 stretch 。

  3. 将容器中的项目水平对齐。您也可以尝试 justify-content：space-around 。注意，如果左和右元素（后/前向链接）的宽度相等，则此方法将只会将中间项目置于容器中心。如果链接长度不同，则需要使用其他方法（请参阅框＃71-78 此处 ）。





布局2：[left] [center] 



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



/ p>


  1. 使用不可见的伪 - 元素在容器的另一端创建相等的平衡。这本质上是从第一个例子中删除的DOM元素的替换。




    2. jsFiddle





    浏览器支援



    所有主要浏览器都支援Flexbox，除IE 8& 9 。



    某些最近的浏览器版本（例如Safari 8和IE10）需要供应商前缀。



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



    此答案。


    I am attempting to create a full-width banner with three internal inline elements. A back link, a logo and a forward link.

    I would also like to use the same code to create a full-width banner with TWO internal inline elements. A left back link and a central logo.

    What I have so far, is:

    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

    I am looking for a solution that is widely supported, so I'm not sure if that rules flex out?

    The result is this: FIDDLE

    EDIT: THE FINAL CORRECT DESIGN WHEN COMPLETE

    Disclaimer: Please understand that although this may be viewed as a 'duplicate' post, after a fair few hours of online research and trial and error, I am still no further progressed. I would, therefore, like to seek help unique to this problem and learn in the process.

    解决方案

    You can build the layout with CSS flexbox.

    For clarity and conciseness, I removed several non-essential decorative styles from the original code. I also used compiled CSS for the benefit of those who don't use preprocessors.

    layout 1: [left] [center] [right]

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

    Notes:

    1. Establish flex container.
    2. Prevent flex items from expanding full height (a default setting). The flex-start value will align each item at the start of the cross axis of the container. In this case, that's the top of the vertical (Y) axis. If you want the items vertically centered, use the center value instead. The default value is stretch.
    3. Align flex items horizontally in the container. You can also try justify-content: space-around. Note that this method will only center the middle item in the container if the left and right elements (the back/forward links) are equal width. If the links vary in length, you'll need to use another method (see boxes #71-78 here).

    layout 2: [left] [center]

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

    Notes:

    1. Use an invisible pseudo-element to create equal balance on the opposite end of the container. This is essentially a replacement for the DOM element that was removed from the first example. It keeps the middle item centered.

    jsFiddle

    Browser Support

    Flexbox is supported by all major browsers, except IE 8 & 9.

    Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

    For a quick way to add all the prefixes you need, use Autoprefixer.

    More details in this answer.

    这篇关于对齐容器内的三个元素（左/中/右）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆