<center>中央寄せ</center>

<div class="box">
  <ul class="list01">
    <li>メニュー01</li>
    <li>メニュー02</li>
    <li>メニュー03</li>
    <li>メニュー04</li>
  </ul>
</div>

<div align="right">右寄せ</div>

<div class="box">
  <ul class="list02">
    <li>メニュー01</li>
    <li>メニュー02</li>
    <li>メニュー03</li>
    <li>メニュー04</li>
  </ul>
</div>
.box{
  margin-bottom: 50px;
  border: #ddd 1px solid;
}

ul.list01 {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}

ul.list02 {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}

li {
  padding: 0 10px;
  border-right: #ddd 1px solid;
}

li:last-child {
  border-right: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.