有没有办法将一个 flex/grid 子项(三个以上)和不同的宽度居中? [英] Is there a way to center one of the flex/grid children(more than three) and with different widths?

问题描述

看看代码片段.有一条红线显示父级的中心.有没有办法水平居中中间块?CSS-grid 解决方案也适用.

我可以想象两种解决方案:

• 位置:绝对
• 用相同宽度的包装器包裹 2 个左块和 2 个右块

但我对其中任何一个都不满意.

.wrapper {显示:弹性；对齐项目:居中；对齐内容:间隔；高度:100px；填充:5px；位置:相对；背景:青色；颜色:#fff;字体系列:无衬线；文本对齐:居中；box-sizing: 边框框；}.wrapper >div {填充:10px；边框:3px纯白色；}.wrapper::before {内容: "";显示:块；宽度:2px；高度:100%；位置:绝对；左:50%；变换:translateX(-50%);背景颜色:红色；}.居中{位置:相对；}.center::before {内容: "";显示:块；宽度:2px；高度:100%；位置:绝对；左:50%；顶部:0；变换:translateX(-50%);背景颜色:黄色；}

<div style="width:20px">L</div><div style="width:10px">L</div><div class="centered" style="width:20%">center</div><div style="width:80px">R</div><div style="width:10px">R</div>

PS:这不是这个问题的重复，因为我正在尝试为任意数量的孩子找到解决方案.我第二个提到了 3 个孩子的解决方案.

解决方案

目前无法实现.

目前有 NO、Flexbox、CSs-Grid 或任何其他布局方法或算法，允许在不考虑兄弟元素大小的情况下将元素居中.

您需要使用 Javascript 来调整边距或重新排列 HTML 结构以适应您的设计选择.

可以使用绝对定位将特定元素居中(尽管您已经排除了这一点)但是这完全忽略了其他兄弟元素，因此他们的位置"可能会受到影响，我们再次依靠需要 JS.

Have a look at the snippet. There is a red line to show center of the parent. Is there a way to horizontally center middle block ? CSS-grid solution will also work.

I can imagine 2 solutions:

• position: absolute
• wrap 2 left blocks and 2 right blocks with wrappers of same width

But I'm not happy with any of them.

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  height: 100px;
  padding: 5px;
  
  position: relative;
  background: teal;
  
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  
  box-sizing: border-box;
}

.wrapper > div {
  padding: 10px;
  border: 3px solid white;
}

.wrapper::before {
  content: "";
  display: block;
  
  width: 2px;
  height: 100%;
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
}

.centered {
  position: relative;
}

.centered::before {
  content: "";
  display: block;
  
  width: 2px;
  height: 100%;
  
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: yellow;
}

<div class="wrapper">
  <div style="width:20px">L</div>
  <div style="width:10px">L</div>
  <div class="centered" style="width:20%">center</div>
  <div style="width:80px">R</div>
  <div style="width:10px">R</div>
</div>

PS: It's not a duplicate of this question, because I am trying to get a solution for any number of children. I mentioned solution for 3 children as a second one.

解决方案

This is not currently possible.

At present there is NO, Flexbox, CSs-Grid or any other layout method or algorithm that allows for centering an element without taking the size of sibling elements into consideration.

You will require Javascript to adjust margins or re-arrange your HTML structure to accomodate your design choices.

It IS possible to center the specific element using absolute positioning (although you have ruled this out) but this ignores the other siblings completely thus their "positions" might be affected and we again fall back on JS being required.

这篇关于有没有办法将一个 flex/grid 子项(三个以上)和不同的宽度居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！