0

I am trying to center 3 elements in the middle of a footer. One of them needs to stay in the dead center of the footer, no matter the size of his neighbors. The thing is now, the group as a whole is centered, but I want the middle one to be in the center, while the left and right ones should 'stick' next to it, one in the left and one in the right. JSFiddle https://jsfiddle.net/xbqz8od2/

<div class=container>
  <div id=left>No matter how big the left or right text gets</div>
  <div id=center>KEEP ME IN THE DEAD CENTER</div>
  <div id=right>foobar</div>
</div>

.container {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: lightgray;
}

#left,
#right,
#center {
  display: flex;
  margin: 1px;
  padding: 5px;
  background-color: lightblue;
}

#left {
  background-color: salmon;
}
#center {
  background-color: lightgreen;
}
skamsie
  • 2,614
  • 5
  • 36
  • 48

1 Answers1

2

Add flex: 1; to the left and right elements.

.container {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: lightgray;
}

#left,
#right,
#center {
  display: flex;
  margin: 1px;
  padding: 5px;
  background-color: lightblue;
}

#left {
  background-color: salmon;
}
#center {
  background-color: lightgreen;
}

#left, #right {
  flex: 1;
}
<div class=container>
  <div id=left>No matter how big the left or right text gets</div>
  <div id=center>KEEP ME IN THE DEAD CENTER</div>
  <div id=right>foobar</div>
</div>
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • 1
    Thanks! I will accept the answer, but it's missing something, `display: block; text-align: right;` on the left element, so it makes the text 'stick' next to it https://jsfiddle.net/v3dfqpzm/ – skamsie Apr 17 '20 at 16:28
  • Well technically you mentioned that the _elements_, not the _text_, should stick to the middle element – Turnip Apr 17 '20 at 16:31
  • You are right, it was hard to explain the whole thing. Anyway, I left the comment for the posterity. – skamsie Apr 17 '20 at 16:33