当边项宽度不同时，保持中间项居中

想象一下下面的布局，其中圆点代表盒子之间的空间:

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

当我移除右边的方框时，我希望中间的方框仍然在中间，就像这样:

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

如果我移除左边的方框也是一样的。

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

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

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

以上都是我的理想情况，但是我不知道如何达到这个效果。因为当我创建一个这样的伸缩结构时:

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

如果左右方框的大小完全相同，我就会得到想要的效果。然而，当其中一个的大小不同时，居中的盒子就不再是真正的居中。

有人能帮我吗?

更新

一个自我证明很好，这很理想

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

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

当前回答

你也可以使用这个简单的方法来达到中间元素的精确中心对齐:

.container {
    display: flex;
    justify-content: space-between;
}

.container .sibling {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: gray;
}

.container .sibling:first-child {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.container .sibling:last-child {
    justify-content: flex-end;
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px; /* .center's width divided by 2 */
}

.container .sibling:last-child .content {
    text-align: right;
}

.container .sibling .center {
    height: 100%;
    width: 200px;
    background-color: lightgreen;
    transform: translateX(50%);
}

codepen: https://codepen.io/ErAz7/pen/mdeBKLG

2020-05-01 21:04:09

其他回答

这里有另一种方法，在父元素和子元素中使用display: flex:

.Layout { 显示:flex; justify-content:中心; } .Left { 显示:flex; justify-content: flex-start; 宽度:100%; } 铃声{ 显示:flex; justify-content: flex-end; 宽度:100%; } <div class = 'Layout'> <div class = 'Left'>我在左边</div> <div class = 'Mid'>居中</div> <div class = 'Right'>我在右边</div> < / div >

2020-07-11 08:52:21

稍微健壮一点的网格解决方案如下所示:

.container { overflow: hidden; border-radius: 2px; padding: 4px; background: orange; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); } .item > div { display: inline-block; padding: 6px; border-radius: 2px; background: teal; } .item:last-child > div { float: right; } <div class="container"> <div class="item"><div contenteditable>edit the text to test the layout</div></div> <div class="item"><div contenteditable>just click me and</div></div> <div class="item"><div contenteditable>edit</div></div> </div>

在这里你可以看到它在Codepen: https://codepen.io/benshope2234/pen/qBmZJWN

2021-07-07 20:29:18

虽然我在这个问题上可能晚了，但所有这些解决方案似乎都很复杂，而且根据你所面临的情况可能不会起作用。

非常简单，只需要用position: absolute来包装你想要居中的组件，而让其他两个组件用justify-content: space来分隔，如下所示:

CSS:

.container { display: flex; justify-content: space-between; align-items: center; background-color: lightgray; } .middle { position: absolute; margin-left: auto; margin-right: auto; /* You should adapt percentages here if you have a background ; else, left: 0 and right: 0 should do the trick */ left: 40%; right: 40%; text-align: center; } /* non-essential, copied from @Brian Morearty answer */ .element { border: 1px solid #ccc; background-color: lightgreen; } p { margin: 5px; padding: 5px; } <div class="container"> <p class="element">First block</p> <p class="middle element">Middle block</p> <p class="element">Third THICC blockkkkkkkkk</p> </div>

2020-12-22 10:21:13

你也可以使用这个简单的方法来达到中间元素的精确中心对齐:

.container {
    display: flex;
    justify-content: space-between;
}

.container .sibling {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: gray;
}

.container .sibling:first-child {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.container .sibling:last-child {
    justify-content: flex-end;
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px; /* .center's width divided by 2 */
}

.container .sibling:last-child .content {
    text-align: right;
}

.container .sibling .center {
    height: 100%;
    width: 200px;
    background-color: lightgreen;
    transform: translateX(50%);
}

codepen: https://codepen.io/ErAz7/pen/mdeBKLG

2020-05-01 21:04:09

而不是默认使用flexbox，使用网格在2行CSS中解决了这个问题，而不需要在顶级子级中添加额外的标记。

HTML:

<header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

CSS:

.header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

Flexbox很棒，但不应该是所有问题的答案。在这种情况下，网格显然是最干净的选择。

甚至为您的测试乐趣做了一个代码依赖: https://codepen.io/anon/pen/mooQOV

2019-03-25 16:07:04

当边项宽度不同时，保持中间项居中

推荐文章

最新文章

标签