CODEWITHSUNDEEP
htmlcsshtml-lists
PRennings
PRennings

Reputation: 11

CSS list-style-image

I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle

it is now like this:

|
|
| here

and I want to be:

|
| here
|

Upvotes: 1

Views: 5399

Answers (5)

Jake Cattrall
Jake Cattrall

Reputation: 461

Forget setting the list style image and use the following css...

ul#example li {
    list-style-type: none;
}

/* create new marker */
ul#example li:before {
    display: marker;
    content: url("new_marker.png");
    /* set the following to fit your needs */
    vertical-align: 3px;
    padding-left: 2px;
    padding-right: 12px;
}

Note the vertical align style, set it to minus figures to push text upwards.

Source of answer.

Upvotes: 1

Dudu
Dudu

Reputation: 73

Try vertical-align: middle; (css)

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

The only realistic way to achieve this is with background-image:

ul li {
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
    list-style-position: outside;
    padding-left: 250px;
    line-height: 160px; /* vertical height of image */
}

JS Fiddle demo.

This does, however, fail badly if the text of the li wraps to a second (or third) line.

Upvotes: 0

Gerben
Gerben

Reputation: 16825

Just increase the line-height of the li elements in question.

#iconlist li {
  line-height: 2em;
}

Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. So use something like this:

#iconlist li {
  padding-left: 22px;
  background: url(20x20-icon.png) left center no-repeat;
  line-height: 22px;
  list-style: none;
}

Upvotes: 3

keithjgrant
keithjgrant

Reputation: 12739

Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.

Upvotes: 0

Related Questions