Adjust list style image position?

css image html-lists
datisdesign picture datisdesign · Nov 10, 2009 · Viewed 259.2k times · Source

Is there a way to adjust the position of list-style-image?

When I use padding for list items the image will stay at its position and won't move with padding...

Answer

a darren picture a darren · Nov 10, 2009

Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.

Using a combination of background and padding styles can create something that looks similar e.g.

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart article has a good starting reference.

Related questions

Float image right within li of ol, text left, works in Chrome, not IE/FF

I would like to have an ordered list that has the text on the left and an image for each li within it on the right of the li. So I floated the image to the right and it puts …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More