CODEWITHSUNDEEP
htmlcsshtml-listsbackground-image
Yann Chabot
Yann Chabot

Reputation: 4869

Alignment of a list-style-image

I'm wondering if there's a way to determine the horizontal and vertical alignment of the list-style-image?

Because at the moment, it looks something like this :

_ LIST TEXT

and I would like it to be like this

– List Text

Thanks a lot!

Upvotes: 0

Views: 3229

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

You can try a couple of approaches, for example:

<h3>Using a list-style-image</h3>
<ul class="basic">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul> 

<h3>Using a Background Image on li</h3>
<ul class="bg-img">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul>

and look at the following CSS:

ul.basic {
    list-style: none;
    list-style-image: url(http://placehold.it/20x20);
    margin: 0 0 0 0;
}
ul.basic li {
    margin: 1.00em 0 0 0;
    padding: 0 0 0 0;
}

ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/20x5);
    background-repeat: no-repeat; 
    background-position: left center;
    margin: 1.00em 0 0 -30px;
    padding: 0 0 0 30px;
}

In the first case, you can make the list image a 20x20 px square for example and embed the hyphen in the center of the image. However, if the font size changes, you won't maintain the vertical centering since the list image is pinned to the base line of the li element.

In the second example, turn off the list style and place a background image on the li element. Again, embed the hyphen in an image, and position it left and center. This approach gives you some control over the position of the hyphen motif by adjusting the left margin and padding of the li element, and the background-position property.

For reference, look at: http://jsfiddle.net/audetwebdesign/JKZLe/

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

This is controlled in webkit and mozilla, respectively, but the -webkit-padding-start and -moz-padding-start rules on <ul> and <ol> elements. It can be overridden by padding-left (this will work in IE as well).

ul {
    padding-left: 40px;
}

Upvotes: 0

Related Questions