当侧边项目具有不同的宽度时，保持中间项目居中 [英] Keep the middle item centered when side items have different widths

问题描述

想象以下布局，其中点代表框之间的空间:

[左框]……[中框]……[右框]

当我移除右边的框时，我喜欢中心框仍然在中心，就像这样:

[左框]……[中心框]…………

如果我删除左框也是如此.

................[中心框].................

现在，当中心框内的内容变长时，它会根据需要占用尽可能多的可用空间，同时保持居中.左右框永远不会缩小，因此当没有空格时 overflow:hidden 和 text-overflow: ellipsis 将生效以破坏内容；

[左框][中心框xxxxxxxxxxxx][右框]

以上都是我的理想情况，但是我不知道如何实现这个效果.因为当我像这样创建一个 flex 结构时:

.parent {显示:弹性；//弹性框justify-content : 间隔；//水平对齐对齐内容:居中；//垂直对齐}

如果左右框的大小完全相同，我就得到了想要的效果.然而，当两者之一的尺寸不同时，居中的框不再真正居中.

有人可以帮我吗?

更新

一个 justify-self 会很好，这将是理想的:

.leftBox {justify-self : flex-start;}.rightBox {justify-self : flex-end;}

解决方案

如果左右框的大小完全相同，我就会得到想要的效果.然而，当两者之一的大小不同时，居中的框不再真正居中.有人可以帮我吗?

这里有一个使用 flexbox 居中居中的方法，不管兄弟元素的宽度如何.

主要特点:

• 纯 CSS
• 没有绝对定位
• 没有 JS/jQuery

使用嵌套的弹性容器和auto边距:

.container {显示:弹性；}.盒子 {弹性:1；显示:弹性；对齐内容:居中；}.box:first-child >跨{边距右:自动；}.box:last-child >跨{边距左:自动；}/* 非必要 */.盒子 {对齐项目:居中；边框:1px 实心 #ccc；背景颜色:浅绿色；高度:40px；}p{文本对齐:居中；边距:5px 0 0 0；}

<div class="box"><span>短文本</span></div><div class="box"><span>居中文本</span></div><div class="box"><span>looooooooooooooooong text</span></div>
<p>&#8593;<br>真正的中心</p>

这是它的工作原理:

• 顶级 div (.container) 是一个弹性容器.
• 每个子 div (.box) 现在都是一个弹性项目.
• 每个 .box 项目都被赋予 flex: 1 以平均分配容器空间 (更多详情).
• 现在这些项目占用了行中的所有空间并且宽度相等.
• 使每个项目成为(嵌套的)弹性容器并添加 justify-content: center.
• 现在每个 span 元素都是一个居中的弹性项目.
• 使用 flex auto 边距来左右移动外部 spans.

您也可以放弃 justify-content 而只使用 auto 边距.

但是 justify-content 可以在这里工作，因为 auto 边距总是具有优先权.

<块引用>

8.1.与 auto 对齐边距

在通过 justify-content 和 align-self 对齐之前，任何正自由空间分配到该维度的自动边距.

Imagine the following layout, where the dots represent the space between the boxes:

[Left box]......[Center box]......[Right box]

When I remove the right box, I like the center box to still be in the center, like so:

[Left box]......[Center box].................

The same goes for if I would remove the left box.

................[Center box].................

Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The left and right box will never shrink and thus when where is no space left the overflow:hidden and text-overflow: ellipsis will come in effect to break the content;

[Left box][Center boxxxxxxxxxxxxx][Right box]

All the above is my ideal situation, but I have no idea how to accomplish this effect. Because when I create a flex structure like so:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.

Is there anyone that can help me?

Update

A justify-self would be nice, this would be ideal:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

解决方案

If the left and right boxes would be exactly the same size, I get the desired effect. However when one of the two is a different size the centered box is not truly centered anymore. Is there anyone that can help me?

Here's a method using flexbox to center the middle item, regardless of the width of siblings.

Key features:

• pure CSS
• no absolute positioning
• no JS/jQuery

Use nested flex containers and auto margins:

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

Here's how it works:

• The top-level div (.container) is a flex container.
• Each child div (.box) is now a flex item.
• Each .box item is given flex: 1 in order to distribute container space equally (more details).
• Now the items are consuming all space in the row and are equal width.
• Make each item a (nested) flex container and add justify-content: center.
• Now each span element is a centered flex item.
• Use flex auto margins to shift the outer spans left and right.

You could also forgo justify-content and use auto margins exclusively.

But justify-content can work here because auto margins always have priority.

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

这篇关于当侧边项目具有不同的宽度时，保持中间项目居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！