如何将“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”固定在中心? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

CSS - 将 div 固定到顶部中心

如何创建两个 <div>,但其中一个必须固定在中心

如何使 div 在页面的同一时间中心保持在顶部?

如何在固定高度的 div 之后制作无尽的 div? [复制]

如何将弹性框放置在页面的中心? [复制]

如何使 div 以固定位置水平居中? [复制]