html - Alignment of a list-style-image

Question

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!

Answer 1

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/

Answer 2

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;
}