作者:yuanguo374 | 来源:互联网 | 2023-02-01 21:14
我知道flexbox为居中项提供了一个很好的解决方案。但是,当我有3个项目并且无论其他2个项目的大小如何,我都希望中心(第二个)项目相对于窗口居中时,我遇到了一个问题。
在我的笔中,您可以看到第二个项目“客户索引”偏离中心,因为右侧的内容大于左侧的内容。 我如何强迫它居中?
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
small
Client Index
Lots of content that moves the center
我的Codepen
1> Michael Coke..:
一种方法是设置flex-grow: 1; flex-basis: 0
3列均匀分布,然后将文本或内容居中。
我正在text-align
居中居中。您也可以display: flex; justify-content: center;
用来做同样的事情。
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex > span {
flex: 1 0 0;
}
.flex > span:nth-child(2) {
text-align: center;
}
small
Client Index
Lots of content that moves the center