CODEWITHSUNDEEP
htmlcsslayouthtml-lists
user3790069
user3790069

Reputation:

Centering contents of li having inside bullet position, what am I doing wrong?

My goal is to centre items of an ordered list with their numbers. I am trying with text-align: center, it works, but the numbers are not centered, so I want to change list-style-position to inside.

But when I apply this, the numbered list transforms into a bulleted list!

Relevant code:

li {
    text-align: center;
    list-style: inside;
}

Demo before list-style >> Demo after list-style

Upvotes: 1

Views: 79

Answers (3)

kapa
kapa

Reputation: 78681

Only change list-style-position, not the whole list-style.

jsFiddle Demo

list-style is a shorthand property (like background, font, margin, etc.), it changes several properties at the same time. Namely it changes list-style-type, list-style-position and list-style-image. If you omit one of them (like you omitted type and image), the default value will be used instead. disc is default for list-style-type, so that is why it looks like an unordered list.

Upvotes: 3

Zac
Zac

Reputation: 1074

You want list-style-position: inside

Updated fiddle: http://jsfiddle.net/cx2Bz/3/

Upvotes: 0

MickyScion
MickyScion

Reputation: 516

well you can try this in your css code

li {
    text-align: center;
    list-style-position: inside
}

the list-style-position have to add...hope helped you...

Upvotes: 0

Related Questions