使用背景图像作为项目符号对齐中心列表项目

Question

我一直试图解决这个问题一小时，但找不到解决方案。

我想要的是一个居中的列表，背景图像为“滴答”。

我想要这个：

除了点对齐到列表ul左侧（1140px宽）而不是列在中心的列表项li的左侧时，它应该正常工作。

Answer 1

您可以使用css :before伪类：

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

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

http://jsfiddle.net/e6y9d/

Answer 2

如果您希望点与ul左侧对齐，请使用点图像作为背景：

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

<强> JSBin Demo #1

更新

如果您需要将点对齐到列表项的左侧，请使用以下内容：

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