使用背景图像作为项目符号对齐中心列表项 [英] 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".

我想要这个:

应该工作，除了点对齐到列表ul(宽1140px)的左侧，而不是列表项li居中的左侧.

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.

推荐答案

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

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

JSBin Demo #1

如果需要将点对齐到列表项的左侧，请使用以下命令:

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

JSBin Demo #2

这篇关于使用背景图像作为项目符号对齐中心列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！