Centering Bullets On A Centered List

前端 未结 4 1119
滥情空心
滥情空心 2020-12-30 23:28

Example - http://jstn.info/html.html - link rot, example no longer available.

Notice the text is centered, but the bullet points themselves are not.

4条回答
  •  梦谈多话
    2020-12-30 23:48

    There are a bunch of ways to solve this depending on your project's UI needs.

    I've listed 3 possible solutions here: https://codesandbox.io/s/r1j95pryn

    Centered Bullets

    ul {
        list-style-position: inside;
        padding-left: 0;
    }
    

    Left-Aligned Bullets w/ Centered Text

    ul {
        display: inline-block;
        padding-left: 0;
    }
    

    Centered List w/ Left-Aligned Text

    ul {
        display: inline-block;
        padding-left: 0;
        text-align: left;
    }
    

    Visuals

提交回复
热议问题