Align center list items using background image as bullets

问题

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.

回答1:

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

回答2:

You can use the css :before pseudo-class:

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

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

http://jsfiddle.net/e6y9d/

来源：https://stackoverflow.com/questions/18450920/align-center-list-items-using-background-image-as-bullets