如何使一个 "div" 元素固定在中心位置？

Question

我在一个Flex容器中有三个子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。

- rkumar310

---

你可以使用这个（https://jsfiddle.net/ydap2cx5/）代替使用*space-between*。 - kukkuz

Answer 1

您可以将 flex box 的宽度设置为固定值，不会增长也不会缩小，并使用 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;
}

- hiew1

---

感谢您的编辑。 - hiew1

Answer 2

尝试将以下代码添加到您的代码中：

.container > div {
   width: 33%;
}

也许您需要进行其他的CSS添加，以防止最后一个div换行，如果有一些边距的话，但这样内容就不会扩展您的div的宽度。

- Alessio

Answer 3

您可以在.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
  }

工作截图：

- TheFlyBiker 420

Answer 4

这是完全可以预料的。因为子元素的宽度未指定，浏览器会检查它们周围的剩余空间并设置其位置。最简单的解决方案是为子元素添加宽度。像这样：

<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;
}

- Paweł Grzybek

Answer 5

我常用的两种居中内容的方法：

1. 使用相对定位：

   <div class="container">
     <div class="div2"> Text1 </div>
   </div>

    .div {
    position:relative;
    Left:50%;
}

使用 display:flex 属性：

<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;
}

- patient.porpoise