I have the following layout: layout

here is the html code:

import React, { Component } from "react";
import "../styles/Navbar.css";

const categories = ["category1", "category2", "category3"];

export default class Navbar extends Component {
  render() {
    return (
      <nav className="navbar">
        <div className="side nav">
          <ul>
            {categories.map((c) => (
              <li>{c}</li>
            ))}
          </ul>
        </div>
        <div className="icon">Icon</div>
        <div className="side controls">Controls</div>
      </nav>
    );
  }
}

and the css :

.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

How can I center the icon? I tried multiple approaches like adding margin to the right but it's not really responsive. and setting the icon to absolute only centers it to the screen but doesn't take into account the left and right divs.

Edit: while using grid, the icon is centered on a large screen but doesn't look centered when the screen is resized:

adjusted css:

.navbar {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 0 5%;
}

.navbar .controls {
  display: flex;
  justify-content: end;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

grid layout

CodePudding user response：

You could easily try with grid instead of flex:

.navbar {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 0 5%;
}

And if you still want the controls to be at the right, you can add:

controls {
  justify-self: end;
}

CodePudding user response：

you'll have to make it position: absolute; and make the navbar position: relative;

then when u justify the content to the center, it'll center perfectly