CODEWITHSUNDEEP
css
Richard Knop
Richard Knop

Reputation: 83697

Help With list-style-image

I have set an image 32x32px as a list style image like this:

.class li{
    list-style-image:url(../images/site/img.png);
}

It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.

I tried:

.class li{
    line-height:1em;
}

But that didn't help.

Upvotes: 2

Views: 6475

Answers (6)

Johan
Johan

Reputation: 647

@mindmyweb, yes indeed your solution works. But your example was a bit too decorated with 100px high lines, so here is a more modest example.

The image should be a 20x20 png bullet, centered, wıth bevel etc, with 3px shadow edge area.

.post li, .page li {
  background-image: url("images/bullet-square-big-red.png");
  background-position: left 2px;
  background-repeat: no-repeat;
  list-style: none outside none;
  margin-bottom: 12px;
  padding-left: 25px;
  padding-top: 0;
}

Works exactly same in firefox 24, chrome 30, ie>=7.

Upvotes: 0

mindmyweb
mindmyweb

Reputation: 898

I tried all of the above and nothing worked so I did this

    .coreUL li{


    display:block;
    list-style:none;
    background-image:url(../images/factoryIcons.png);
    background-repeat:no-repeat;
    background-position:left 8px;
    padding-top:10px;
    padding-left:50px;

    height:100px;




    }

Now that works like a charm -- infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;

i hope this helps.

Upvotes: 1

cast01
cast01

Reputation: 663

The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..

ul.class{
    list-style-image:url(../images/site/img.png);
}

Upvotes: 3

Anonymous
Anonymous

Reputation: 21

I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.

Therefore I prefer placing the image as background inside the LI tag like so

ul      {list-style-type:none}
ul li   {list-style-type:none;
             background:url(image.png) 1px 4px no-repeat;
             margin:0;
             padding-left:20px}

This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.

Upvotes: 2

jpdelatorre
jpdelatorre

Reputation: 3593

Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.

.class li { height:32px; line-height:32px; list-style-image:url(img.png); }

Upvotes: 0

mkrause
mkrause

Reputation: 1399

You can use the vertical-align property to specify centered alignment. Like so:

.class li {
    vertical-align: middle;
}

Upvotes: 4

Related Questions