当侧面物品具有不同宽度时，保持中间物品居中

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:

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

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

3 个解决方案

#1

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.

这是一种使用flexbox将中间项目居中的方法，无论兄弟姐妹的宽度如何。

Key features:

主要特征：

pure CSS
纯CSS
no absolute positioning
没有绝对的定位
no JS/jQuery
没有JS / jQuery

Use nested flex containers and auto margins:

使用嵌套的flex容器和自动边距：

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

3 个解决方案

#1

更多相关文章

随机推荐