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

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 演示 #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 演示 #2