在两个不同宽度的弹性项目之间水平居中弹性项目[重复]
Posted
技术标签:
【中文标题】在两个不同宽度的弹性项目之间水平居中弹性项目[重复]【英文标题】:Horizontally center flex item between 2 flex items of different widths [duplicate] 【发布时间】:2016-01-22 02:42:15 【问题描述】:假设我有 3 个 div 水平显示 flexbox
:
| |-div1-| |-center-div-| |-wider-div-| |
我希望中心 div 与父级的中间对齐。我怎样才能做到这一点? justify-content
将基于所有 3 个 div 的所有宽度之和居中,并且将 align-self: center
应用于中间 div 没有任何作用,因为 align 属性操纵另一个轴上的定位。
是否有响应式 CSS 解决方案,或者我应该求助于 jQuery?
ul
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
li
background-color: red;
border: 5px solid blue;
list-style: none;
<ul>
<li><a href = "#">short</a></li>
<li><a href = "#">want center</a></li>
<li><a href = "#">loooooooooooooooooong</a></li>
</ul>
这个问题的说明: https://jsfiddle.net/7w8mp8Lj/2/
【问题讨论】:
这不应被标记为重复。这不同于它被标记为重复的那个。另一个解决方案不适用于此问题,但@Sitckers 提供的解决方案将在那里工作。 同意。这不是重复的。另一个问题很广泛。这个问题很具体。搜索引擎找到了这个问题,而不是另一个。如果我们不能在网上搜索并找到答案,那有什么帮助? 【参考方案1】:您可以将第一个和最后一个li
设置为增长flex: 1
,并将a
设置为内联块,并将文本对齐1/2/3 li
设置为右/中/左。
jsfiddle
ul
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
list-style: none;
padding: 0;
li:nth-child(1)
text-align: right;
flex: 1;
li:nth-child(2)
text-align: center;
li:nth-child(3)
text-align: left;
flex: 1;
li a
display: inline-block;
background-color: red;
border: 5px solid blue;
<ul>
<li><a href="#">short</a></li>
<li><a href="#">want center</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
</ul>
【讨论】:
【参考方案2】:这是一个 flex 方法,可以完美地将中间项目居中:
没有 jQuery 无绝对定位 html 没有变化ul
display: flex;
padding: 0;
li
display: flex;
justify-content: center;
flex: 1;
background-color: red;
border: 2px solid blue;
li:first-child > a
margin-right: auto;
li:last-child > a
margin-left: auto;
<ul>
<li>
<a href="#">short</a>
</li>
<li>
<a href="#">want center</a>
</li>
<li>
<a href="#">loooooooooooooooooong</a>
</li>
</ul>
jsFiddle
它是这样工作的:
ul
是主要的弹性容器。
每个li
flex 项都被赋予flex: 1
,以实现容器空间的平均分配。
现在li
s 占用了行中的所有空间并且宽度相等。
使每个li
成为一个弹性容器并添加justify-content: center
现在每个锚元素都是居中的弹性项目。
使用 flex auto
边距来左右移动外部锚点。
【讨论】:
【参考方案3】:您可以使用绝对定位将未居中的项目移出,这样它们就不会影响居中。
ul
display: flex;
justify-content: center;
background-color: purple;
padding: 0;
list-style: none;
li
position: relative;
li > a
display: block;
background-color: red;
border: 5px solid blue;
li:first-child > a
position: absolute;
right: 0;
li:last-child > a
position: absolute;
left: 0;
<ul>
<li><a href="#">short</a></li>
<li><a href="#">want center</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
</ul>
但是,请注意,您将失去灵活性,因为 flex 容器的绝对定位子级不参与 flex 布局(重新排序步骤除外)。
【讨论】:
【参考方案4】:我使用一个flex容器,里面有三个盒子,其中两个——left和right——宽度相同,本身就是flex容器,包裹任意宽度的内容:
[(a box) ] [centered content] [ (a longer box)]
left wrapper right wrapper
代码如下:
<div class="test">
<div class="wrapper left">
<div class="box one"></div>
</div>
<div class="box two"></div>
<div class="wrapper right">
<div class="box three"></div>
</div>
</div>
CSS:
.test
height: 50px;
display: flex;
justify-content: center;
.wrapper
width: 33%;
display: flex;
.wrapper.left
justify-content: flex-end;
.box
border: 1px solid red;
.one
width: 100px;
.two
width: 50px;
.three
width: 150px;
【讨论】:
这很有帮助,谢谢。宽度是我的关键!以上是关于在两个不同宽度的弹性项目之间水平居中弹性项目[重复]的主要内容,如果未能解决你的问题,请参考以下文章