how do I get the bullet points of a ul to center with the text

Question

When I try to center a  lt ul gt  the text in the  lt li gt  centers but the bullet points stay on the far left of the page  Is there any way to get the bullet points to stay with the text when it is centered    abc text-align  center      lt div id  section1  gt   lt div id  abc  gt   lt ul gt   lt li gt one lt  li gt   lt li gt two lt  li gt   lt li gt three lt  li gt   lt  ul gt   lt div  gt   lt div  gt

User · Answer

I found the answer today  Maybe its too late but still I think its a much better one  Check this one https   jsfiddle net Amar newDev khb2oyru 5   Try to change the CSS code    lt ul gt  max-width 1   margin auto   text-align left   lt  ul gt   max-width 80  or something like that   Try experimenting you might find something new

User · Answer

ul     padding-left  0    list-style-position  inside     Explanation  The first property padding-left  0 clears the default padding spacing for the ul element while list-style-position  inside makes the dots bullets of li aligned like a normal text  So this code  lt p gt The ul element lt  p gt   lt ul gt  asdfas    lt li gt Coffee lt  li gt     lt li gt Tea lt  li gt     lt li gt Milk lt  li gt   lt  ul gt   without any CSS will give us this   but if we add in the CSS give at the top  that will give us this

User · Answer

Add list-style-position  inside  to the ul element   example   The default value for the list-style-position property is outside    x000D   x000D  ul   x000D      text-align  center  x000D      list-style-position  inside  x000D    x000D   lt ul gt  x000D       lt li gt one lt  li gt  x000D       lt li gt two lt  li gt  x000D       lt li gt three lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Another option  which yields slightly different results  would be to center the entire ul element    x000D   x000D   parent   x000D    text-align  center  x000D    x000D   parent  gt  ul   x000D    display  inline-block  x000D    x000D   lt div class  parent  gt  x000D     lt ul gt  x000D       lt li gt one lt  li gt  x000D       lt li gt two lt  li gt  x000D       lt li gt three lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s how you do it   First  decorate your list this way    lt div class  p  gt   lt div class  text-bullet-centered  gt  amp  8277  lt  div gt  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text   lt  div gt   lt div class  p  gt   lt div class  text-bullet-centered  gt  amp  8277  lt  div gt  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text   lt  div gt    Add this CSS    p       position  relative      margin  20px      margin-left  50px     text-bullet-centered       position  absolute      left  -40px      top  50       transform  translate 0  -50        font-weight  bold      And voila  it works  Resize a window  to see that it indeed works   As a bonus  you can easily change font and color of bullets  which is very hard to do with normal lists    x000D   x000D   p   x000D    position  relative  x000D    margin  20px  x000D    margin-left  50px  x000D    x000D   x000D   text-bullet-centered   x000D    position  absolute  x000D    left  -40px  x000D    top  50   x000D    transform  translate 0   -50    x000D    font-weight  bold  x000D    x000D   lt div class  p  gt  x000D     lt div class  text-bullet-centered  gt  amp  8277  lt  div gt  x000D    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text x000D    text text text text text text text text text text text text text x000D   lt  div gt  x000D   lt div class  p  gt  x000D     lt div class  text-bullet-centered  gt  amp  8277  lt  div gt  x000D    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text x000D    text text text text text text text text text text text text text x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can do that with list-style-position  inside  on the ul element    ul       list-style-position  inside      See working fiddle

[html] how do I get the bullet points of a <ul> to center with the text?

Examples related to html

Examples related to css

Examples related to html-lists