How to center wrapped text inside a flex item?

Question

i'm trying to create a navigation bar, but one of the items contains a long text which wraps and doesn't look centered anymore, i tried text-align property but it looses the vertical alignement on the other items, here's my code (open in full page):

nav {
  display: flex;
}

div {
  flex: 1;
}

ul {
  flex: 1;
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  font-size: 24px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<nav>
  <div></div>
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>Looonger teeeeext
    </li>
    <li>text</li>
  </ul>
</nav>

Answer 1

text-align:center; should be enough to center your text. The justify-content:center; should be sufficient to keep the text vertically aligned

See snippet below:

nav  {
  display:flex;
}

div {
  flex:1;
}

ul {
   flex: 1;
   display: flex;
   list-style:none;
}

li{
   flex:1;
   font-size:24px;
   border:1px solid black;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

<nav>
  <div></div>
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>Looonger teeeeext</li>
    <li>text</li>
  </ul>
</nav>