Align center list items using background image as

Question

I've been trying to fix this for an hour now and can't find a solution.

What I want is a centered list with background image as "ticks".

I want this:

Works as it should except the dots are aligned to the left of the list ul (1140px wide) and not the left of the list item li which is centered.

Answer 1

You can use the css :before pseudo-class:

ul {
  list-style: none;
  text-align: center;
}

li:before {
  content: "\2022";
}

http://jsfiddle.net/e6y9d/

Answer 2

If you want the dots to be aligned to the left of ul, Use dot image as background:

ul li {
  text-align: center;
  background: url(path/to/dot.png) 0 center no-repeat;
}

JSBin Demo #1

Update

If you need the dots to be aligned to the left of list items, use the following:

ul {
  list-style-type: none;
  padding: 0;
  text-align: center;
  white-space: pre-line;
}

ul li {
  display: inline-block;
  padding-left: 15px;
  background: url(path/to/dot.png) 0 center no-repeat;
}

JSBin Demo #2