使用 Flex
HTML
<ul>
<li>news</li>
<li>about</li>
<li>service</li>
<li>product</li>
<li>contact</li>
</ul>CSS
<style>
ul,li{
list-style: none;
padding: 0;
}
li{
padding: .5em 1em;
margin: .5em
background-color: rgb(209, 209, 209);
}
ul{
width: 50vw;
background-color: rgb(233, 233, 233);
margin: 1em auto;
display: flex;
justify-content: center;
}
</style>Example
See the Pen CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727) on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
