0

I can't figure out how to make the menu item always be centered. In my situation, the container with the text "Name Surname" is not wide enough for its content, causing the menu to be positioned to the right. I have it set to flex: 1 0 auto which allows it to expand. I have provided a simplified version of my code.

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}
<div class="container">
  <a class="logo" href="/">
    <h1>Name Surname</h1>
  </a>
  <nav class="nav">
    <ul class="list">
      <li class="item">
        <a class="link" href="#about">About me</a>
      </li>
      <li class="item">
        <a class="link" href="#skills">Skills</a>
      </li>
      <li class="item">
        <a class="link" href="#education">Education</a>
      </li>
      <li class="item">
        <a class="link" href="#projects">Projects</a>
      </li>
      <li class="item">
        <a class="link" href="#cv">CV</a>
      </li>
      <li class="item">
        <a class="link" href="#somelink">Some Link</a>
      </li>
    </ul>
  </nav>
  <div class="settings">
    <button>TM
        </button>
    <button>LS
        </button>
  </div>
</div>

enter image description here

InSync
  • 4,851
  • 4
  • 8
  • 30
wowblvck
  • 41
  • 6
  • Does this answer your question? [Keep the middle item centered when side items have different widths](https://stackoverflow.com/questions/32378953/keep-the-middle-item-centered-when-side-items-have-different-widths) – InSync May 22 '23 at 16:37
  • In this solution, the objects on the left and right occupy the entire area, but I need the entire area to be occupied by the object in the middle (menu) – wowblvck May 22 '23 at 17:31

1 Answers1

0

Uncertain if this is the effect you were going for?

If you only need to center the name inside its container, just style that particular h1 to be text-align:center - see demo below.

Apologies if I have misunderstood the desired outcome.

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}
/*   ADDED   */
a.logo h1{
  text-align:center;
}
<div class="container">
  <a class="logo" href="/">
    <h1>Name Surname</h1>
  </a>
  <nav class="nav">
    <ul class="list">
      <li class="item">
        <a class="link" href="#about">About me</a>
      </li>
      <li class="item">
        <a class="link" href="#skills">Skills</a>
      </li>
      <li class="item">
        <a class="link" href="#education">Education</a>
      </li>
      <li class="item">
        <a class="link" href="#projects">Projects</a>
      </li>
      <li class="item">
        <a class="link" href="#cv">CV</a>
      </li>
      <li class="item">
        <a class="link" href="#somelink">Some Link</a>
      </li>
    </ul>
  </nav>
  <div class="settings">
    <button>TM
        </button>
    <button>LS
        </button>
  </div>
</div>
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • It's not quite right. I need to make the menu, which is in the center, take up the entire width at the moment when the text on the left wraps – wowblvck May 22 '23 at 17:29
  • Are you using Bootstrap? (That's pretty much exactly what Bootstrap is designed for...) – cssyphus May 22 '23 at 18:46
  • No. I'm not use frameworks or library, because as very simple landing page with minimal JS and individual design – wowblvck May 23 '23 at 04:17
  • Then the trick is to do that magic the way that bootstrap does it - use @media queries. Bootstrap has pre-defined several "break-points" (min/max screen widths where they have decided to break (reformat) the page). You can easily do the same thing. But that is a pure-CSS solution, with no ability to test and verify. It sounds like what you want to do, though, is to intelligently configure the `nav` to `width:100vw` at the moment when the `h1` has reached a certain `height` (double height due to line break). For that, the only solution is JavaScript. – cssyphus May 23 '23 at 11:08