CSS ul li 水平對齊居中

使用 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/

---