How to Adjust the Position of List Style Image

CSS allows us to use images as bullets but provides little control over the appearance and positioning. HTML bullets can be replaced with images by using the CSS list-style-image property. But the problem with using this property is that here also we have little control over their appearance with the list items.

In our snippet, we’ll show how to properly use the padding to overcome such difficulty and apply padding not only to the list items but also to images.

We need to use the combination of the background and padding properties. Let’s see how to do this step by step.

Create HTML

Use an <h1> tag.
Use a <ul> element with four <li> elements inside.

How to Adjust the Position of List Style Image

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example</h1>
    <ul>
      <li>List item1</li>
      <li>List item1</li>
      <li>List item1</li>
      <li>List item1</li>
    </ul>
  </body>
</html>

Now, style the <li> elements inside the <ul> tag.

Add CSS

Add the background property and specify the URL of an image. Also, specify the “no-repeat” and “left center” values.
Specify the padding property.
Set the list-style to “none”.
Add the margin and vertical-align properties.

How to Adjust the Position of List Style Image

css

ul li {
  background: url('https://www.w3docs.com/build/images/arrow-right.4aad274a.png') no-repeat left center;
  padding: 5px 10px 5px 25px;
  list-style: none;
  margin: 0;
  vertical-align: middle;
}

The full example of our code looks like the following.

Example of adjusting the position of list style images:

Example of adjusting the position of list style images:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        background: url('https://www.w3docs.com/build/images/arrow-right.4aad274a.png') no-repeat left center;
        padding: 5px 10px 5px 25px;
        list-style: none;
        margin: 0;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <ul>
      <li>List item1</li>
      <li>List item1</li>
      <li>List item1</li>
      <li>List item1</li>
    </ul>
  </body>
</html>

Result

- List item1 - List item1 - List item1 - List item1

How to Adjust the Position of List Style Image ​

Create HTML ​

Add CSS ​

Example of adjusting the position of list style images: ​

Result ​

How to Adjust the Position of List Style Image

Create HTML

Add CSS

Example of adjusting the position of list style images:

Result