How do I keep a "div" fixed in the center?

Question

I have a three divs within a flex div. I'm trying to figure out how to prevent the middle div from moving/changing position when the text in the first or last div changes.

.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>

If Text3 is changed to something different, for example, AnotherText3, note that the center div (Text2) also moves (shifts to the left), I would like Text2 to stay centered and not move.

Text3 could be long in which case it should occupy the space between Text2 and Text3 (while still keeping Text2 in the center) and be truncated when there is no more space left.

Here the link to my jsfiddle.

you can use this (https://jsfiddle.net/ydap2cx5/) instead of using *space-between* — kukkuz, Jun 09 '19 at 06:08

score 1 · Answer 1 · edited Jun 10 '19 at 21:58

You can set the flex box's widths to be fixed, don't grow and don't shrink, and use white-space, overflow, and text-overflow properties to truncate the text:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

For example:

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

score 1 · Answer 2 · answered Jun 09 '19 at 06:43

1

Try adding this to your code:

.container > div {
   width: 33%;
}

Maybe you have to do some other css addings to prevent wrapping of the last div if there are some margins, but this way the content will not expand width of your div.

answered Jun 09 '19 at 06:43

Alessio

1,621
3
12
13

TheFlyBiker 420 · Answer 3 · 2019-06-09T07:06:39.333

You can use CSS Grid on the .container like this to achieve the following layout:

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

Working Screenshot:

score 0 · Answer 4 · answered Jun 09 '19 at 06:43

This 100% expected. Because width of children is not specified, browser checks the remaining space around them and sets its position. Simplest solution would be adding a width to children elements. Like so:

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

score -1 · Answer 5 · answered Jun 09 '19 at 06:34

Two of my go to methods for getting centered content

using position relative:

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

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

using display flex property:

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

How do I keep a "div" fixed in the center?

5 Answers5