JSFiddle - React, Tailwind, and code Playground

Flex margin auto examples.

by Travis Almand

HTML

<nav>
  <ul>
    <li><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li><a href="/interact">Interact</a>
    <li><a href="/login">Login</a>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li><a href="/interact">Interact</a>
    <li id="login"><a href="/login">Login</a>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li id="interact"><a href="/interact">Interact</a>
    <li><a href="/login">Login</a>
  </ul>
</nav>

<nav>
  <ul>
    <li id="about"><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li><a href="/interact">Interact</a>
    <li><a href="/login">Login</a>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li id="center"><a href="/center">center</a></li>
    <li><a href="/interact">Interact</a>
    <li><a href="/login">Login</a>
  </ul>
</nav>

<nav id="center_all">
  <ul>
    <li><a href="/about">About</a>
    <li><a href="/projects">Projects</a>
    <li><a href="/center">center</a></li>
    <li><a href="/interact">Interact</a>
    <li><a href="/login">Login</a>
  </ul>
</nav>

CSS

nav > ul {
  display: flex;
  margin: 0;
  padding: 0;
}
nav > ul > li {
  list-style: none;
  padding: 10px;
}
nav > ul > #about {
  margin-right: auto;
}
nav > ul > #center {
  margin: auto;
}
nav > ul > #interact {
  margin-left: auto;
}
nav > ul > #login {
  margin-left: auto;
}

#center_all li {
  margin: auto;
}