Positioning two div elements relative to the middle one

Question

I need to center an element #center-navigation relative to the page center and then position the two another on the left (#logo) and right (#contacts) sides of the element. Currently in my implementation #center-navigation is not centered on the page. Is it possible to do with flexbox?

#row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#logo {
  height: 20px;
  width: 80px;
  background-color: red;
  margin-right: auto;
}

#contacts {
  margin-left: auto;
}

h1 {
  text-align: center;
}

<div id="row">
  <div id="logo">
  
  </div>
  <div id="center-navigation">
    Some navigation here
  </div>
  <div id="contacts">
    example@mail.org
  </div>
</div>
<h1>
  Some long website title goes here
</h1>

Can you add the screenshot of the requirement? – Nitheesh Aug 11 '21 at 08:36 — Nitheesh, Aug 11 '21 at 08:36

Nikola Pavicevic · Accepted Answer · 2021-08-11T08:38:23.847

1

You can try with css grid :

#row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

#logo {
  height: 20px;
  width: 80px;
  background-color: red;
}

#contacts {
  background-color: blue;
  text-align: right;
}

#center-navigation {
  background-color: green;
}

h1 {
  text-align: center;
  background-color: yellow;
}

<div id="row">
  <div id="logo">
  
  </div>
  <div id="center-navigation">
    Some navigation here
  </div>
  <div id="contacts">
    example@mail.org
  </div>
</div>
<h1>
  Some long website title goes here
</h1>

edited Aug 11 '21 at 08:38

answered Aug 11 '21 at 08:18

Nikola Pavicevic

21,952
9
25
46

I've tried it before. `Some navigation here` is not centered relative to h1. – vlmdgbbgg Aug 11 '21 at 08:22
Did you try with grid ? I changed answer. – Nikola Pavicevic Aug 11 '21 at 08:28

score 0 · Answer 2 · edited Aug 11 '21 at 14:02

0

The #contacts width should be equal to the #logo width.

#contacts, #logo{
  width: 20%
}

edited Aug 11 '21 at 14:02

Qrzysio

1,147
3
12
25

answered Aug 11 '21 at 08:24

imgss

81
6

score 0 · Answer 3 · edited Aug 11 '21 at 08:58

It is impossible to do with flexbox!
I suggest you to use position:absolute.

#row {
  /*display: flex;*/
  /*flex-direction: row;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  text-align:center;
  position:relative;
}

#logo,#contacts{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}

#logo {
  height: 20px;
  width: 80px;
  background-color: red;
  margin-right: auto;
}

#contacts {
  margin-left: auto;
  left:auto;
  right:0;
}

h1 {
  text-align: center;
}

<div id="row">
  <div id="logo">
  
  </div>
  <div id="center-navigation">
    Some navigation here
  </div>
  <div id="contacts">
    example@mail.org
  </div>
</div>
<h1>
  Some long website title goes here
</h1>

Positioning two div elements relative to the middle one

3 Answers3