<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.