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

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

问题描述

我正在尝试创建一个包含三个内部内联元素的全宽横幅.一个反向链接、一个徽标和一个正向链接.

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

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

HTML

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

</节>

SCSS:

#header-blue {宽度:100%；底边距:50px；高度:自动；背景色:$primary-blue;颜色:#fff;#header-wrap {文本对齐:居中；边框:1px纯绿色；边距:0 自动；填充:1rem 2.5rem；div {显示:内联块；垂直对齐:中间；}}.header-left {向左飘浮;边框:1px纯红色；宽度:100px；}.header-右{浮动:对；边框:1px纯红色；宽度:100px；}.header-center {边框:1px纯红色；边距:0 自动！重要；显示:内联块；宽度:100px；}}//标题-蓝色

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

结果是这样的:

完成后的最终正确设计

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

解决方案

您可以使用 CSS 弹性盒.

为了清晰和简洁，我从原始代码中删除了几个非必要的装饰样式.为了那些不使用预处理器的人的利益，我还使用了已编译的 CSS.

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

#header-wrap {显示:弹性；/* 1 */对齐项目:flex-start；/* 2 */对齐内容:间隔；/* 3 */文本对齐:居中；填充:1rem 0；}#header-blue { margin-bottom: 50px;背景色:#3498DB；颜色:#fff;}.header-left { 边框:1px 纯红色；宽度:100px；}.header-right { 边框:1px 纯红色；宽度:100px；}.header-center { 边框:1px 纯红色；宽度:100px；}

<div id="header-wrap"><div class="header-left"><p>1</p>

<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p>

<div class="header-right"><p>3</p><p>3</p>

</section>

注意事项:

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

<小时>

布局 2:[左] [中心]

#header-wrap::after {/* 4 */内容: "";宽度:100px；}#header-wrap {显示:弹性；/* 1 */对齐项目:flex-start；/* 2 */对齐内容:间隔；/* 3 */文本对齐:居中；填充:1rem 0；}#header-blue { margin-bottom: 50px;背景色:#3498DB；颜色:#fff;}.header-left { 边框:1px 纯红色；宽度:100px；}.header-right { 边框:1px 纯红色；宽度:100px；}.header-center { 边框:1px 纯红色；宽度:100px；}

<div id="header-wrap"><div class="header-left"><p>1</p>

<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p>

</section>

注意事项:

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

<小时>

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天全站免登陆