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/

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

READ  CSS RWD 響應式 @media 及常用尺寸速查

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料