如何将“div”固定在中心? [复制]
Posted
技术标签:
【中文标题】如何将“div”固定在中心? [复制]【英文标题】:How do I keep a "div" fixed in the center? [duplicate] 【发布时间】:2019-10-24 00:36:12 【问题描述】:我在一个 flex div 中有三个 div。我试图弄清楚当第一个或最后一个 div 中的文本发生变化时如何防止中间 div 移动/改变位置。
.container
display: flex;
justify-content: space-between;
<div class="container">
<div clas="div1">Text1</div>
<div class="div2">Text2</div>
<div class="div3">Text3</div>
</div>
如果将 Text3 更改为其他内容,例如,AnotherText3,请注意中心 div (Text2) 也会移动(向左移动),我希望 Text2 保持居中而不移动。
Text3 可能很长,在这种情况下,它应该占据 Text2 和 Text3 之间的空间(同时仍将 Text2 保持在中间),并在没有剩余空间时被截断。
这里是我的jsfiddle的链接。
【问题讨论】:
你可以使用这个 (jsfiddle.net/ydap2cx5) 而不是使用 space-between 【参考方案1】:尝试将此添加到您的代码中:
.container > div
width: 33%;
如果有一些边距,也许你必须做一些其他的 css 添加来防止最后一个 div 的换行,但是这样内容不会扩大你的 div 的宽度。
【讨论】:
【参考方案2】:您可以将弹性框的宽度设置为固定,不增长也不缩小,并使用 white-space、overflow 和 text-overflow 属性截断文本:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
例如:
.container
display: flex;
justify-content: space-between;
.div1
flex-grow: 0; /* flex-grow: 0 means don't grow, 1 means grow*/
flex-shrink: 0; /* flex-shrink: 0 means don't shrink, 1 means shrink */
flex-basis: 300px; /* Width of the flex box stays 300px */
.div2
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
/* Truncate text */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.div3
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
【讨论】:
感谢编辑。【参考方案3】:这是 100% 的预期。由于未指定子项的宽度,浏览器会检查它们周围的剩余空间并设置其位置。最简单的解决方案是为子元素添加宽度。像这样:
<div class="container">
<div class="div div1">
Text1
</div>
<div class="div div2">
Text2
</div>
<div class="div div3">
I am a super long text here. I am a super long text here. I am a super long text here. I am a super long text here.
</div>
</div>
.container
display: flex;
.div
flex-basis: 33.3333%;
.div1
.div2
text-align: center;
.div3
text-align: right;
【讨论】:
【参考方案4】:您可以像这样在.container
上使用 CSS Grid 来实现以下布局:
<div class="container">
<div class="left-div">
<div clas="div1"> Text1 </div>
</div>
<div class="div2 center-div"> Text2 </div>
<div class="right-div">
<div clas="div3"> Text4 </div>
</div>
</div>
.container
display: grid;
grid-template-columns: 2fr 1fr 2fr;
.left-div
display: flex;
justify-content: flex-start;
.right-div
display: flex;
justify-content: flex-end;
.center-div
display: flex;
justify-content: center
工作截图:
【讨论】:
【参考方案5】:我的两种获取居中内容的方法
-
使用相对位置:
<div class="container">
<div class="div2"> Text1 </div>
</div>
.div
position:relative;
Left:50%;
-
使用显示弹性属性:
<div class="container">
<div clas="div1"> Text1 </div>
<div class="div2"> Text2 </div>
<div class="div3"> Text3 </div>
</div>
.container
display: flex;
.div1
text-align: center;
【讨论】:
以上是关于如何将“div”固定在中心? [复制]的主要内容,如果未能解决你的问题,请参考以下文章