CODEWITHSUNDEEP
htmlcsslisthtml-lists
Tom Brennan
Tom Brennan

Reputation: 28

How to line up the list style icon with the text

I am using a customer list style image for an LI and i am wanting to line up the text in the centre of the icon.

I have tried using margins and paddings to no avail.

Please see code below and screenshot

HTML:

<ul class="homeList">
 <li>Over 1 million happy travellers</li>
 <li>Over 450 local pick-up points with return travel for your convenience</li
 <li>Great range of breaks across Britain, Europe &amp; America</li>
 <li>Included excursion programmes</li>
 <li>Superb value assured</li>
</ul>

CSS:

.homeList li {
    list-style-image: url(../images/bulleticon.png);
    line-height: 20px;
    padding: 0;
    margin: 0;
}

And this is how it is looking currently

Example of current list

Upvotes: 0

Views: 103

Answers (1)

Nadezhda Serafimova
Nadezhda Serafimova

Reputation: 792

Instead of list-style-img use background-image for the list item.

li {
  list-style: none;
  background: url(../images/bulleticon.png) left center;
  padding-left: 20px;
}

And you can change easier the image position as you change the background-position property.

Upvotes: 1

Related Questions