如何将“div”固定在中心？ [复制]答案

【问题标题】：How do I keep a "div" fixed in the center? [duplicate]如何将“div”固定在中心？ [复制]
【发布时间】：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

标签： html css flexbox

【解决方案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;
}

【讨论】：